今天在开发页面的时候,遇到一个限制文本域输入行数的,我用的是el-input,将type设置成textarea,就相当于HTML里的textarea标签了,去找了一下textarea的属性,仅有一个rows和cols来控制行和列,然写上之后的效果是控制多少行显示滚动条的,如图,我设置的是:rows="3",也就是当我输入了3行之后,在输入就会出现右侧的滚动条,这并不是我想要的最多只能输入多少行。
按照我的想法是获取到文本域的行数进行判断的,如果rows大于6就不能在输入了,然而无论是网上搜到的还是自己写的都失败了,最后采用了watch监听的方式,通过\n可以监听到换行了多少,也就能获取到文本域有多少行,然后再进行判断就好弄了。我写的有点问题,最后还是找到了一个大神的文章才实现的(涉及一行代码的正则表达式,啊,我看不懂,不过实现我想要的效果就值得推荐,如有问题,请各位大神不吝赐教),效果如下:
我设置的是最多输入6行,为了测试方便,实际上我的需求是要20行的,提示信息不一致,我就不改了哈。附上代码: