当前位置:网站首页>Verify the word limit of textarea input box. Only prompt but no submission limit

Verify the word limit of textarea input box. Only prompt but no submission limit

2022-06-13 08:22:00 SDL Dahua

[ recommend ] Small program version system background rapid development    Recommend a real-time news interface : Suitable for news APP、 Website 、 Small program etc.

// Original handwriting , Multiple tests are available , Welcome to discuss

// The code only depends on jQuery

<div class="formControls col-xs-8 col-sm-9">
    <!--  Core code  start-->
    <textarea name="tablemsg" cols="" rows="" class="textarea" placeholder=" Say something ... Minimum input 10 Characters "
              onKeyUp="Huitextarealength(this)"></textarea>
    <p class="textarea-numberbar"><em class="textarea-length">0</em>/
        <am>100</am>
    </p>
    <!--  Core code  end-->
</div>

 

 

/**
 *  verification textarea Input box word limit , Prompt only, no submission restrictions 
 * 1、 The total must be used in <am> Label up  2、 Call this method 
 *  Reference resources :<em class="textarea-length">0</em>/<am>100</am>
 * @param obj
 * @constructor
 */
var Huitextarealength = function (obj){
    var html = $(obj).parent();
    var tatal = html.find('am').html();
    var sets = $(obj).val().length;

    if(sets*1>tatal*1){
        var str = '<div style="width: auto;position: absolute; right: 4%;color: red;"> Content exceeds limit </div>';
        $(obj).after(str);
        html.find('em').css({color:'red'});
    }else {
        $(obj).parent().find('div').remove();
        html.find('em').css({color:'black'});
    }
    // Set the entered quantity 
    html.find('em').html(sets);
}

 

原网站

版权声明
本文为[SDL Dahua]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/02/202202270543123296.html