1. 程式人生 > >JavaScript 實現textarea限制輸入字數, 輸入框字數實時統計更新,輸入框實時字數計算移動端bug解決

JavaScript 實現textarea限制輸入字數, 輸入框字數實時統計更新,輸入框實時字數計算移動端bug解決

表單 var 假設 字體 eve 大網 blog 無法 tin

textarea稱文本域,又稱文本區,即有滾動條的多行文本輸入控件,在網頁的提交表單中經常用到。與單行文本框text控件不同,它不能通過maxlength屬性來限制字數,為此必須尋求其他方法來加以限制以達到預設的需求。

通常的做法就是使用#腳本語言來實現對textarea文本域的字數輸入限制,簡單而實用。假設我們有一個id為 txta1 的textarea文本區,我們可以通過以下代碼限制它的鍵盤輸入字數為10個字(漢字或其他小角字符):

<script language="#" type="text/ecmascript"> 
window.onload = function() 
{ 
document.getElementById(
‘txta1‘).onkeydown = function() { if(this.value.length >= 10) event.returnValue = false; } } </script>

JavaScript輸入框字數實時統計更新

技術分享圖片

如上圖所示的輸入框的字體計算在各大網站上是在熟悉不過的了,當然在pc端制作起來也是相當簡單,只要捕捉鍵盤事件對輸入框中的字數進行獲取,再用限制字數減去獲取的字數便可以實時計算出“還可以輸入多少字”。但是在移動端這個方法還像是不可行的,第一,pc端可以使用keyup或者keydown進行事件捕捉,當然移動端也可以使用他們,但是在移動端拼音輸入時就會出現下圖的情況:

技術分享圖片

當我拼音輸入完畢要選擇我的目標漢字時,鍵盤上方的漢字“我是你大哥”就不屬於鍵盤的一部分了,所以這個時候點擊”我是你大哥“進行選擇是就不會觸發keyup或者keydown事件,那麽下方的“還可以輸入**”字“就會出現錯誤,也就會出現bug。下面我就把pc端的字數計算與移動端的字數計算全都寫出來:

1.pc端方法:

 
$("textarea").on("keyup",function(){
  var textLength = $("textarea").val().length;
  var numLength = 500-textLength;
  $(".takeTip span").text(numLength);
})

已上是最常用的一種方法,這種方法在pc端完美運行,很簡單。

2.移動端方法:

setInterval(function(){
  var textLength = $("textarea").val().length;
  var numLength = 500-textLength;
  $(".takeTip span").text(numLength);
},100)

因為移動端方法會出現keyup無法觸發的問題,所以就只能不用與鍵盤相關的事件來進行捕捉,使用setInterval函數來進行實時的監控,在移動端完美運行。

下面是vue版:

watchWordsCount:function(){
setInterval(function(){
var textLength = $("textarea").val().length;
var numLength = 20-textLength;
if(numLength<=0){
$(".textarea").val($(".textarea").val().substr(0, 20));
$(".nowcount").html(‘<span class="red">評論內容超出最大限制</span>‘+(20));

}else{
$(".nowcount").text(20-numLength);
}

},100)
}
 

 mounted:function(){
            this.watchWordsCount();
        },
<textarea id="content" class="textarea" placeholder="俺們村提倡言論自由哦" rows="4"></textarea>
        <div class="textarea-count">
            <span class="nowcount">0</span>/20
        </div>

上面的那種方法並不是很好,因為一直開的定時器,下面改造一下:

html不變,用了vue的watch方法;

watch: {
            commentText: function (val) {
                if(val.length>=120){
                    this.commentText = val.substr(0,120);
                    this.nowcount = ‘<span class="red">評論內容超出最大限制</span>120‘;
                }else{
                    this.nowcount = val.length;
                }
            }
        }

JavaScript 實現textarea限制輸入字數, 輸入框字數實時統計更新,輸入框實時字數計算移動端bug解決