Javascript для проверки входных символов многострочной текстовой области

#javascript #html

#javascript #HTML

Вопрос:

У меня есть многострочная текстовая область, которая принимает 42 символа, и если пользователь превысит лимит и нажмет кнопку отправки, он получит предупреждающее сообщение типа «превышен лимит, поэтому удалите символы «***». Ниже приведен код, который выполняет то же самое.

 <head runat="server">
    <title></title>
    <script type="text/javascript">
        function ok(maxchars) {
            if (document.ourform.box.value.length > maxchars) {
                alert('Too much data in the text box! Please remove '  
                        (document.ourform.box.value.length - maxchars)   ' characters');
                return false;
            }
            else
                return true;
        }
    </script>
</head>
<body>
    <div>
        <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/chkarea.pl"
              method="post" name="ourform" onsubmit="return ok(42)">
            Please enter data, at most 42 characters:<br/>
            <textarea name="box" rows="5" cols="30">
            </textarea>
            <br/><input type="submit"/>
        </form>
    </div> 
</body>
</html>

Но моя проблема в том, что я должен получить то же самое предупреждающее сообщение, как только я смещу фокус управления из области текстового поля вместо нажатия кнопки отправки.
Поэтому, пожалуйста, помогите мне достичь этого …!!
Заранее спасибо…

Дополнительное требование: После получения предупреждающего сообщения и нажатия кнопки ok лишние символы должны быть удалены. Пожалуйста, помогите..

Ответ №1:

Вот простое решение с использованием jQuery

 $(function(){
	$("#box").keypress(function(){
  	if($(this).val().trim().length > $(this).data("limit") - 1) {
			alert("You have reached the limit");
  		return false;
    }
  });
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" name="ourform">
  Please enter data, at most 42 characters:<br/>
  <textarea name="box" rows="5" cols="30" data-limit="10" id="box"></textarea>
  <br/><input type="submit"/>
</form>

Пожалуйста, попробуйте это.

1. Пожалуйста, помогите с дополнительными требованиями.

2. Каковы ваши дополнительные требования?

3. Дополнительное требование: После получения предупреждающего сообщения и нажатия кнопки ok лишние символы должны быть удалены. Пожалуйста, помогите..

Ответ №2:

Вам нужно будет использовать событие onchange или keyup, чтобы привязать это к текстовой области.

Сначала добавьте идентификатор в свою текстовую область. Затем привяжите к нему прослушиватель событий и вызовите свою функцию.

 document.getElementById("textAreaBox").addEventListener("keyup", ok(42));

Для предупреждения вы можете использовать onpropertychange событие в HTML.

  <textarea name="box" rows="5" cols="30" onpropertychange="ok(42)">
</textarea>

Ответ №3:

добавьте это onblur=»ok (42)» или onkeyup =»ok (42)» внутри вашей текстовой области

    <textarea name="box" rows="5" cols="30" onblur="ok(42)">
         </textarea>

     OR

   <textarea name="box" rows="5" cols="30" onkeyup="ok(42)">
        </textarea>

Ответ №4:

Вы можете указать идентификатор / класс для текстовой области и использовать простые события JqueryEvents — Onblur или FocusOut для запуска вашей функции. —>https://api.jquery.com/blur /

Событие размытия Javascript -> http://www.w3schools.com/jsref/event_onblur.asp

Ответ №5:

Вы можете присвоить своей текстовой области атрибут ‘maxlength‘. Вот пример. Это работает.

 <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/chkarea.pl"
    method="post" name="ourform" onsubmit="return ok(42)">
    Please enter data, at most 42 characters:<br />
    <textarea name="box" rows="5" cols="30" maxlength="42">
        </textarea>
    <br />
    <input type="submit" />
</form>