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 相关文章推荐
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
Javascript之Date对象详解
Jun 07 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
浅谈js中的this问题
Aug 31 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
法国在线药房:1001Pharmacies
2021/03/07 全球购物
中专生求职自荐信范文
2013/12/22 职场文书
初中生物教学反思
2014/01/10 职场文书
公司接待方案
2014/03/08 职场文书
2015年元旦活动总结
2014/05/09 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
金秋助学感谢信
2015/01/21 职场文书