溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
先上效果圖###
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語句判斷一下是否滿足了限制.
發現多行代碼排版錯誤,貼張圖吧.
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;
}
},
寫一個刪除多余字符函數
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固定輸入行數與添加下劃線樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
