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 子窗口操作父窗口的代码
Sep 21 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 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 采集书并合成txt格式的实现代码
2009/03/01 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
php日期操作技巧小结
2016/06/25 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
jQuery中调用WebService方法小结
2011/03/28 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
python3使用GUI统计代码量
2019/09/18 Python
Python坐标线性插值应用实现
2019/11/13 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
质量月口号
2014/06/20 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
公司搬迁通知
2015/04/20 职场文书
JS实现简单九宫格抽奖
2022/06/28 Javascript