如果輸入超過200個字符，如何在文本區域中提示消息

Question

如果輸入超過200個字符，如何在文本區域中提示錯誤消息。 我正在嘗試maxLength屬性。 但是它停止接受輸入。 我不想要那個。 我想要一個錯誤消息

Answer 1

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

Answer 2

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

Answer 3

由於您的帖子帶有角度標簽，因此我假設您使用的是角度標簽。 通常，您可以在textarea模型上放置手表。

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

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