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脚本类
Aug 27 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
第一篇初识bootstrap
Jun 21 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
浅谈Vue的响应式原理
May 30 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 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
Protoss魔法科技
2020/03/14 星际争霸
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python使用matplotlib画饼状图
2018/09/25 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
自荐信的两点禁忌
2013/10/30 职场文书
经典英文广告词
2014/03/18 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
技术员个人工作总结
2015/03/03 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
小学语文国培研修日志
2015/11/13 职场文书
Python 如何安装Selenium
2021/05/06 Python
React如何创建组件
2021/06/27 Javascript
TS 类型兼容教程示例详解
2022/09/23 Javascript