入力が200文字を超える場合、テキストエリアにメッセージを表示する方法

Question

入力が200文字を超える場合、テキストエリアにエラーメッセージを表示する方法。 私はmaxLength属性を試しています。しかし、それは入力を取ることをやめます。私はそれを望んでいない。エラーメッセージが表示されます。

Answer 1

入力変更時にonchange属性を使用して呼び出されるJquery関数を作成してみてください。 あなたの投稿に角度のついたタグがあるので、角度を使用していると仮定しているので、 var messageTxt = $("#yourelementid").value(); If(messageTxt.length() > 200) { alert("input is more than 200 characters"); }

Answer 2

を使用してください。一般に、テキストエリアモデルに時計を置くことができます。

$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>