如果輸入超過200個字符，如何在textarea中提示消息

Question

如果輸入超過200個字符，如何在textarea中提示錯誤消息。 我正在嘗試maxLength屬性。但它停止採取投入。我不想那樣。我想要一個錯誤消息

Answer 1

嘗試編寫一個使用onchange屬性在輸入更改上調用的Jquery函數。 然後使用 var messageTxt = $("#yourelementid").value(); If(messageTxt.length() > 200) { alert("input is more than 200 characters"); }

Answer 2

，因爲您的文章有棱角的標籤，我假設你正在使用的角度。一般來說，您可以在textarea模型上放置手錶。

$scope.$watch('yourTextAreaModel', function(newVal) { 
    if(newVal.length > 200){ 
    alert("input cannot be more than 200 characters"); 
    } 
}) 

*您甚至可能不需要手錶，但它取決於您的應用程序。

Answer 3

<style type="text/css"> 
    .input-error ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 
     color: red; 
    } 
    .input-error :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
     color: red; 
     opacity: 1; 
    } 
    .input-error ::-moz-placeholder { /* Mozilla Firefox 19+ */ 
     color: red; 
     opacity: 1; 
    } 
    .input-error :-ms-input-placeholder { /* Internet Explorer 10-11 */ 
     color: red; 
    } 
</style> 

<div class="text-wrapper"> 
    <textarea id="infoText" placeholder="Type your text"></textarea> 
</div> 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#infoText').bind('input propertychange', function() { 
        if($(this).val().length>4){ 
         $(this).parent(".text-wrapper").addClass("input-error"); 
         $(this).attr("placeholder","Text cannot exceed more than 200 characters") 
         $(this).val(""); 
        } 
        else{ 
         $(this).parent(".text-wrapper").removeClass("input-error") 
        } ; 

     }); 
    }); 
</script>