Vue实现textarea固定输入行数与添加下划线样式的思路详解

先上效果图###

textarea下划线

设置一张1*35 //行高的图片,设置背景图即可.

background: url('./img/linebg.png') repeat; border: none;outline: none;overflow: hidden; line-height: 35px;//注意行高要和背景图高度一致resize: none;

固定输入行数

需求:用户固定不论多少字节,只能输入2行.

因为是限制行数,所以不能用maxlength设置.

实现思路

首先想到计算出用户输入了几行,然后超出部分字符删除掉就OK.

rush:js;">

</pre>
</div>
<p><h3>首先取出</h3></p>
<p>textarea元素的整体高度,然后除一下行高很轻松的到目前输入到几行.</p>
<p>因为如果<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>一次复制一大段<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>,粘贴到textarea里则会直接出现多行,<a href="https://www.jb51.cc/tag/shanchuzifuchuan/" target="_blank" class="keywords">删除字符串</a>超出部分换行还会触发scroll事件,所以用if语句判断一下是否满足了限制.</p>
<p>发现多行<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>排版<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>,贴张图吧.</p>
<p style="text-align: center"><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201806/201806281129522.jpg" /></p></p>
<div class="jb51code">
<pre class="brush:js;">
textsrc() {  
this.$refs.Headquarters.scrollTo(0,0)  
let LineNumber = this.$refs.Headquarters.scrollHeight / 35;  
if (LineNumber => 2) {   
this.state = false;  
} else {   
this.state = true;  
};  
!this.tiemr && !this.state && this.tiemer();  
this.tiemr && this.state && clearInterval(this.tiemr);  
if (this.state) {   
this.tiemr = null;  
}  
},</pre>
</div>
<p>写<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a><a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>多余字符<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a></p>
<p style="text-align: center"><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201806/201806281129523.jpg" /></p></p>
<div class="jb51code">
<pre class="brush:js;">
tiemer() 
{  
this.tiemr = setInterval(() => 
{   
this.text.Headquarters = this.text.Headquarters.slice(   
0,this.text.Headquarters.length - 1   
);   
if (this.$refs.Headquarters.scrollHeight / 35 == 2)
{   
clearInterval(this.tiemr)   
this.tiemr = null   
this.state = true   
}
  },10);  
 },</pre>
</div>
<p>最后贴一下 <a target="_blank" href="https://github.com/<a href="https://www.jb51.cc/tag/PHP/" target="_blank" class="keywords">PHP</a>javac/textarea">github</a>,欢迎有更好<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>的大神赐教.</p>
<p><h3>总结</h3></p>
<p>以上所述是小编给大家介绍的使用Vue实现textarea固定输入行数与<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>下划线样式。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可<a href="https://www.jb51.cc/tag/fenxiang/" target="_blank" class="keywords">分享</a>给好友！感谢<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>。</p><div class="topcard-tags"><a href="https://m.jb51.cc/tag/textarea/" class="tag_link" target="_blank">textarea</a><a href="https://m.jb51.cc/tag/textareap/" class="tag_link" target="_blank">textarea</a><a href="https://m.jb51.cc/tag/vue/" class="tag_link" target="_blank">vue</a><a href="https://m.jb51.cc/tag/pvue/" class="tag_link" target="_blank">vue</a><a href="https://m.jb51.cc/tag/vuep/" class="tag_link" target="_blank">vue</a><a href="https://m.jb51.cc/tag/xiahuaxianyangshi/" class="tag_link" target="_blank">下划线样式</a><a href="https://m.jb51.cc/tag/guding/" class="tag_link" target="_blank">固定</a><a href="https://m.jb51.cc/tag/pguding/" class="tag_link" target="_blank">固定</a><a href="https://m.jb51.cc/tag/gudingp/" class="tag_link" target="_blank">固定</a></div>
                </div>
              </div>
          </div>
            
            <div class="clearfix"></div>

            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <div class="title"><h1>相关文章</h1></div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/vue/4738809.html" title="<el-table-column prop="item_no" label="料号"/>设置最小宽度"><el-table-column prop="item_no" label="料号"/>设置最小宽度</a>
              </div>
              <div class="summary">可以通过min-width属性来设置el-table-column的最小宽度。以...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/07-25/11/aa5cd839f2492870d49c14806d1b42d4.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/vue/4738808.html" title="vue 理解yarn start 和yarn dev的区别">vue 理解yarn start 和yarn dev的区别</a>
              </div>
              <div class="summary">yarn dev，当文件变动后，会自动重启。 yanr start不会自动重...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/vue/4738807.html" title="vue3 ref响应式引用">vue3 ref响应式引用</a>
              </div>
              <div class="summary">ref 用于创建一个对值的响应式引用。这个值可以是原始值（如...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/vue/4738806.html" title="Vue查询传参">Vue查询传参</a>
              </div>
              <div class="summary">通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/vue/4738805.html" title="suffix-icon属性隐藏el-select下拉框右边的下拉图标">suffix-icon属性隐藏el-select下拉框右边的下拉图标</a>
              </div>
              <div class="summary">&lt;el-form-item label=&quot;入库类型&quot; ...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/vue/4738804.html" title="API引用在Element UI (Vue 2)和Element Plus (Vue 3)中的不同">API引用在Element UI (Vue 2)和Element Plus (Vue 3)中的不同</a>
              </div>
              <div class="summary">API 变动 样式类名变化: 一些组件的样式类名有所变动，可能需...</div>
            </div></div>
            </div>
           
        </div>
      </div>
    <footer id="footer">
    <div class="container">
        <div class="copyright">
            Copyright © 2018 编程之家. 当前版本 V7.0.16<br>
            <span class="ml5">编程之家 版权所有 
            <a href="https://beian.miit.gov.cn/"  target="_blank"  rel="nofollow">闽ICP备13020303号-8</a>
        </div>
    </div>
</footer>
<script>
(function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
<script src="https://m.jb51.cc/js/count.js"></script>
  </body>
</html>