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自动设置IFrame高度的小例子
Jun 08 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
vue操作dom元素的3种方法示例
Sep 20 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python实现一次创建多级目录的方法
2015/05/15 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python模块导入的细节详解
2018/12/10 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书