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 相关文章推荐
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
Vue实现购物车功能
Apr 27 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
Nuxt的路由配置和参数传递方式
Nov 06 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 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP错误机制知识汇总
2016/03/24 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
关于php开启错误提示的总结
2019/09/24 PHP
JS中style属性
2006/10/11 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
Javascript Objects详解
2014/09/04 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
python编程开发之类型转换convert实例分析
2015/11/13 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python3.6数独问题的解决
2019/01/21 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
python interpolate插值实例
2020/07/06 Python
Python 高效编程技巧分享
2020/09/10 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
Shell如何接收变量输入
2016/08/06 面试题
电子商务专业推荐信范文
2013/12/02 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书