文字框限制輸入字數的JS
HTML程式碼:
其中:class="ui-text" 、class="ui-input"、data-num="48"、class="ui-textTips",是必不可少的。
<div class="div-p ui-text">
<ul><li></li><li></li><li></li></ul>
<textarea name="zhufuyu" id="zhufuyu" cols="" rows="" placeholder="" maxlength="48" class="ui-input" data-num="48"></textarea>
<div style="margin-top: 5px;" class="zhufuyu_text_msg ui-textTips">還可以輸入<em>48</em>個字</div>
</div>
JS程式碼:
function tipsText(){
$('.ui-text').each(function(){
var _this = $(this);
var elm = _this.find('.ui-input');
var txtElm = _this.find('.ui-textTips');
var maxNum = _this.find('.ui-input').attr('data-num') || 500;
console.log($.support.leadingWhitespace);
if(!$.support.leadingWhitespace){
_this.find('textarea').on('propertychange',function(){
changeNum(elm,txtElm,maxNum);
});
_this.find('input').on('propertychange',function(){
changeNum(elm,txtElm,maxNum);
});
} else {
_this.on('input',function(){
changeNum(elm,txtElm,maxNum);
});
}
});
}
tipsText();
//獲取文字輸出字數,可以遍歷使用
//txtElm動態改變的dom,maxNum獲取data-num值預設為120個字,ps數字為最大字數*2
function changeNum(elm,txtElm,maxNum) {
//漢字的個數
//var str = (elm.val().replace(/\w/g, "")).length;
//非漢字的個數
//var abcnum = elm.val().length - str;
total = elm.val().length;
if(total <= maxNum ){
texts = maxNum - total;
txtElm.html('還可以輸入<em>'+texts+'</em>個字');
}else{
texts = total - maxNum ;
txtElm.html('已超出<em class="error">'+texts+'</em>個字');
}
return ;
}
相關文章
- Qt 實現文字輸入框,帶字數限制QT
- 限制文字框只能輸入數字:Asp.net&C#ASP.NETC#
- 限制文字框只能夠輸入數字程式碼例項
- Angular.js 限制輸入框輸入內容,為純數字AngularJS
- js實現的文字框只能夠輸入數字JS
- JavaScript 文字框只能輸入數字JavaScript
- 文字框只能輸入數字 javascriptJavaScript
- asp.net input文字框只能輸入數字jsASP.NETJS
- 文字框只能輸入數字程式碼
- js規定文字框只能夠輸入字母和數字JS
- javascript限制文字框輸入長度JavaScript
- jquery實現的限制文字框只能輸入非負實數jQuery
- js實現的檢測文字框輸入是否是數字的程式碼JS
- javascript實時顯示文字框輸入字數JavaScript
- 短視訊軟體開發,flutter 輸入框限制輸入 數字、小數Flutter
- 直播軟體開發,限制富文字框輸入的字元數上限字元
- jQuery限制文字框輸入長度詳解jQuery
- javascript限制textarea文字框輸入字元個數程式碼例項JavaScript字元
- 限定文字框只能輸入數字例項程式碼
- 文字框輸入數字倒計例項程式碼
- input 輸入框只能輸入數字
- 動態顯示:文字框字數(輸入還剩多少字)
- jquery實現的限制文字框只能夠輸入大於0整數jQuery
- JS 文字輸入框放大鏡效果JS
- jQuery文字框輸入數字彈出格式化層jQuery
- javascript驗證輸入文字框內容是否為數字JavaScript
- JavaScript 驗證輸入文字框內容是否為數字JavaScript
- jquery實現的規定文字框只能輸入數字可以包括小數jQuery
- 規定文字框只能夠輸入數字包括小數的jQuery程式碼jQuery
- input 限制字數輸入時候 限制字數會出現負數
- 限制HTML的input只能輸入數字、英文、漢字...HTML
- 如何設定文字框只能夠輸入數字程式碼例項
- 【新特性速遞】數字輸入框的字首和字尾(位於輸入框內部)
- js 校驗輸入框還可以輸入多少個字JS
- input只能輸入文字框
- 從一次輸入框無法輸入的bug,談如何限制輸入框輸入型別型別
- js多個文字框輸入內容同步效果JS
- JavaScript–文字框中只允許輸入數字的操作(其他字元不顯示)JavaScript字元