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实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 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 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
window.parent与window.openner区别介绍
2012/04/12 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
简单介绍Python中的floor()方法
2015/05/15 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python中str.join()简单用法示例
2018/03/20 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
python实发邮件实例详解
2019/11/11 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
python定义类的简单用法
2020/07/24 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
节水倡议书范文
2014/04/15 职场文书
妇女干部培训方案
2014/05/12 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python