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


Posted in Javascript onJune 28, 2018

先上效果图###

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.

<textarea class='textarea' @scroll='textsrc' v-model='text.Headquarters' ref='Headquarters' rows="2"></textarea>

首先取出

textarea元素的整体高度,然后除一下行高很轻松的到目前输入到几行.

因为如果用户一次复制一大段文字 ,  粘贴到textarea里则会直接出现多行 , 删除字符串超出部分换行还会触发scroll事件, 所以用if语句判断一下是否满足了限制.

发现多行代码排版错误,贴张图吧.

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

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;  
}  
},

写一个删除多余字符函数

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

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);  
 },

最后贴一下 github ,欢迎有更好方法的大神赐教.

总结

以上所述是小编给大家介绍的使用Vue实现textarea固定输入行数与添加下划线样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 #Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 #Javascript
浅谈vue首屏加载优化
Jun 28 #Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 #jQuery
Vue SPA单页应用首屏优化实践
Jun 28 #Javascript
Webpack的dll功能使用
Jun 28 #Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 #Javascript
You might like
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
详解Python自建logging模块
2018/01/29 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
python得到单词模式的示例
2018/10/15 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
高中军训感言400字
2014/02/24 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
感恩教师节主题班会
2015/08/12 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
centos8安装MongoDB的详细过程
2021/10/24 MongoDB