Проверка текстовой области в скрипте Java замораживает все текстовые области

У меня есть страница Html, которая использует Java Script и я открываю эту страницу в WebView

Моя проблема заключается в том, когда я разрешал проверку максимальной длины в текстовой области, а затем после проверки текстовой области все текстовые области на странице зависают, и я не могу редактировать или удалять из любой текстовой области.

Пожалуйста, помогите мне, как решить эту проблему, чтобы после проверки текстовых областей область текста не зависала.

Моя страница в формате HTML

  <table cellpadding="2" width="20%" bgcolor="99FFFF" align="center" cellspacing="2"> <tr> <td colspan=2> <center> <font size=4><b>Student Registration Form</b></font> </center> </td> </tr> <tr> <td>Name</td> <td><input type=text name=textnames id="textname" size="30"></td> </tr> <tr> <td>Father Name</td> <td><input type="text" name="fathername" id="fathername" size="30"></td> </tr> <tr> <td>Postal Address</td> <td><input type="text" name="paddress" id="paddress" size="30"></td> </tr> <tr> <td>Personal Address</td> <td><input type="text" name="personaladdress" id="personaladdress" size="30"></td> </tr> <tr> <td>Sex</td> <td><input type="radio" name="sex" value="male" size="10">Male <input type="radio" name="sex" value="Female" size="10">Female</td> </tr> <tr> <td>City</td> <td><select name="City"> <option value="-1" selected>select..</option> <option value="New Delhi">NEW DELHI</option> <option value="Mumbai">MUMBAI</option> <option value="Goa">GOA</option> <option value="Patna">PATNA</option> </select></td> </tr> <tr> <td>Course</td> <td><select name="Course"> <option value="-1" selected>select..</option> <option value="B.Tech">B.TECH</option> <option value="MCA">MCA</option> <option value="MBA">MBA</option> <option value="BCA">BCA</option> </select></td> </tr> <tr> <td>District</td> <td><select name="District"> <option value="-1" selected>select..</option> <option value="Nalanda">NALANDA</option> <option value="UP">UP</option> <option value="Goa">GOA</option> <option value="Patna">PATNA</option> </select></td> </tr> <tr> <td>State</td> <td><select Name="State"> <option value="-1" selected>select..</option> <option value="New Delhi">NEW DELHI</option> <option value="Mumbai">MUMBAI</option> <option value="Goa">GOA</option> <option value="Bihar">BIHAR</option> </select></td> </tr> <tr> <td>PinCode</td> <td><input type="number" maxlength='6' name="pincode" id="pincode" size="30"></td> </tr> <tr> <td>EmailId</td> <td><input type="text" name="emailid" id="emailid" size="30"></td> </tr> <tr> <td>DOB</td> <td><input type="text" name="dob" id="dob" size="30"></td> </tr> <tr> <td>MobileNo</td> <td><input type="text" name="mobileno" id="mobileno" size="30"></td> </tr> <tr> <td><input type="reset"></td> <td colspan="2"><input type="submit" value="Submit Form" /></td> </tr> </table> </form> 

Я добавил максимальную длину и только число в Pincode textarea. Когда я ввел PIN-код, после чего всякая текстовая область замораживается.

Если бы я не поместил эту проверку в область текста pincode, она никогда не зависает.

Проблема, с которой вы столкнулись, является ошибкой и уже упоминалась как проблема № 35264 .

Я создал обходной путь для него в jsfiddle . Для удобства вставляемый код ниже.

HTML:

 <input type="number" maxlength='6' name="pincode" id="pincode" size="30" max="999999" > 

Javascript:

 var pincode = document.getElementById('pincode'); var maxLength = pincode.maxLength; pincode.onkeypress = function(e){ if( pincode.value.length >= maxLength ){ return false; } }; 

Решение состоит в том, чтобы убедиться, что содержимое входного элемента не пересекает максимальный предел.

  • В каждом событии нажатия клавиши сравните длину входного значения с максимальной длиной. Если это больше возвращает false, так что вход будет отброшен.
  • Установите атрибут max на входном элементе, чтобы предотвратить ввод пользователем более максимального значения с помощью клавиши со стрелкой вверх.

Прежде всего, вы сказали, что это не текстовая область. Это всего лишь текст. Текстовую область следует игнорировать как <textarea rows="10" cols="15"></textarea> .

Фактически атрибут maxlength используется для ограничения количества символов, которые пользователь может ввести. Вы maxlength='6' здесь, что означает, что максимальные значения, которые пользователь здесь может ввести, составляют всего 6 цифр или символ.

Надеюсь, вы пытались настроить ширину введенного ввода. Для этого style="width:100px;max-width:60%;" следующий атрибут и значение: style="width:100px;max-width:60%;" , <input type="number" maxlength='6' name="pincode" id="pincode" size="30" style="width:100px;max-width:60%;">

В HTML вы можете использовать атрибут max для установки максимальной длины на номер типа ввода.

 <input type="number" min="1" max="999999" name="pincode" id="pincode" size="30"> 

Документация о maxLength в HTML

максимальная длина

Если значением атрибута type является текст, адрес электронной почты, поиск, пароль, tel или url, этот атрибут> указывает максимальное количество символов (в кодовых точках Unicode), которые пользователь может ввести; Для других типов управления он игнорируется. Он может превышать значение атрибута size. Если он не указан, пользователь может ввести неограниченное количество символов. Указание отрицательного числа приводит к поведению по умолчанию; То есть пользователь может ввести неограниченное количество символов. Ограничение оценивается только тогда, когда значение атрибута было изменено.

Таким образом, он предназначен для игнорирования для type="number" ввода type="number"

Посмотрите здесь полное описание атрибутов для < input >

Он будет устанавливать только максимально допустимое число в соответствии с указанным максимальным значением, он не будет блокировать значение больше, чем максимальное значение. Max показывает всплывающее окно ошибки, показывающее, что предел превышен.


Если вы хотите заблокировать текстовое значение, не получая больше 6, вы можете использовать JavaScript

SCRIPT

  <script> function validateLength(obj) { if(obj.value.length > 6) obj.value = obj.value.substr(0, 6); } </script> 

HTML

  <input type="number" min="1" max="999999" name="pincode" id="pincode" onkeyup="validateLength(this)"> 

Я думаю, что единственный способ выполнить то, что вам нужно, – это JavaScript. Я бы использовал метод, похожий на Dileep с несколькими отличиями:

  • Вместо того, чтобы просто сращивать первые шесть символов от текущего значения, я бы сохранил последнее введенное действительное значение и вернусь к нему. Подобная функциональность, но более стабильная, насколько я могу судить.
  • Вместо использования встроенного обратного вызова HTML-событий я бы рекомендовал назначить его непосредственно через DOM в JavaScript. Для обсуждения различий между этими методами см. Это SO .
  • Я также думаю, что наличие окна ввода кратковременно мигает другим цветом, по крайней мере для целей отладки, поможет узнать, когда и как выполнялся код, если что-то не работает.
  • Наконец, я бы использовал <input type="tel"/> а не <input type="number"/> . tel прежнему будет поднимать номерную площадку на мобильных устройствах, но, в отличие от number , не будет иметь пустого value при вводе нечисловых данных. ( См . Это так).

Я поставил все это в короткий JSFiddle, чтобы вы могли видеть. Не стесняйтесь использовать его повторно, если это помогает: http://jsfiddle.net/VPL5e/1/

Помогает ли это решить вашу проблему? Если вам нужно что-нибудь еще, спросите!

В вашем html-коде нет ничего плохого, поскольку проблема заключается в «проверке формы». В любом случае я предоставляю вам полный код html и код проверки формы.

HTML

  <html> <head> <script type="text/javascript" src="validate.js"></script> </head> <body> <form action="#" name="StudentRegistration" onsubmit="return(validate());"> <table cellpadding="2" width="20%" bgcolor="99FFFF" align="center" cellspacing="2"> <tr> <td colspan=2> <center><font size=4><b>Student Registration Form</b></font></center> </td> </tr> <tr> <td>Name</td> <td><input type=text name=textnames id="textname" size="30"></td> </tr> <tr> <td>Father Name</td> <td><input type="text" name="fathername" id="fathername" size="30"></td> </tr> <tr> <td>Postal Address</td> <td><input type="text" name="paddress" id="paddress" size="30"></td> </tr> <tr> <td>Personal Address</td> <td><input type="text" name="personaladdress" id="personaladdress" size="30"></td> </tr> <tr> <td>Sex</td> <td><input type="radio" name="sex" value="male" size="10">Male <input type="radio" name="sex" value="Female" size="10">Female</td> </tr> <tr> <td>City</td> <td><select name="City"> <option value="-1" selected>select..</option> <option value="New Delhi">NEW DELHI</option> <option value="Mumbai">MUMBAI</option> <option value="Goa">GOA</option> <option value="Patna">PATNA</option> </select></td> </tr> <tr> <td>Course</td> <td><select name="Course"> <option value="-1" selected>select..</option> <option value="B.Tech">B.TECH</option> <option value="MCA">MCA</option> <option value="MBA">MBA</option> <option value="BCA">BCA</option> </select></td> </tr> <tr> <td>District</td> <td><select name="District"> <option value="-1" selected>select..</option> <option value="Nalanda">NALANDA</option> <option value="UP">UP</option> <option value="Goa">GOA</option> <option value="Patna">PATNA</option> </select></td> </tr> <tr> <td>State</td> <td><select Name="State"> <option value="-1" selected>select..</option> <option value="New Delhi">NEW DELHI</option> <option value="Mumbai">MUMBAI</option> <option value="Goa">GOA</option> <option value="Bihar">BIHAR</option> </select></td> </tr> <tr> <td>PinCode</td> <td><input type="text" name="pincode" id="pincode" size="30"></td> </tr> <tr> <td>EmailId</td> <td><input type="text" name="emailid" id="emailid" size="30"></td> </tr> <tr> <td>DOB</td> <td><input type="text" name="dob" id="dob" size="30"></td> </tr> <tr> <td>MobileNo</td> <td><input type="text" name="mobileno" id="mobileno" size="30"></td> </tr> <tr> <td><input type="reset"></td> <td colspan="2"><input type="submit" value="Submit Form" /></td> </tr> </table> </form> </body> </html> 

Проверка формы

 function validate() { if( document.StudentRegistration.textnames.value == "" ) { alert( "Please provide your Name!" ); document.StudentRegistration.textnames.focus() ; return false; } if( document.StudentRegistration.fathername.value == "" ) { alert( "Please provide your Father Name!" ); document.StudentRegistration.fathername.focus() ; return false; } if( document.StudentRegistration.paddress.value == "" ) { alert( "Please provide your Postal Address!" ); document.StudentRegistration.paddress.focus() ; return false; } if( document.StudentRegistration.personaladdress.value == "" ) { alert( "Please provide your Personal Address!" ); document.StudentRegistration.personaladdress.focus() ; return false; } if ( ( StudentRegistration.sex[0].checked == false ) && ( StudentRegistration.sex[1].checked == false ) ) { alert ( "Please choose your Gender: Male or Female" ); return false; } if( document.StudentRegistration.City.value == "-1" ) { alert( "Please provide your City!" ); document.StudentRegistration.City.focus() ; return false; } if( document.StudentRegistration.Course.value == "-1" ) { alert( "Please provide your Course!" ); return false; } if( document.StudentRegistration.District.value == "-1" ) { alert( "Please provide your Select District!" ); return false; } if( document.StudentRegistration.State.value == "-1" ) { alert( "Please provide your Select State!" ); return false; } if( document.StudentRegistration.pincode.value == "" || isNaN( document.StudentRegistration.pincode.value) || document.StudentRegistration.pincode.value.length != 6 ) { alert( "Please provide a pincode in the format ######." ); document.StudentRegistration.pincode.focus() ; return false; } var email = document.StudentRegistration.emailid.value; atpos = email.indexOf("@"); dotpos = email.lastIndexOf("."); if (email == "" || atpos < 1 || ( dotpos - atpos < 2 )) { alert("Please enter correct email ID") document.StudentRegistration.emailid.focus() ; return false; } if( document.StudentRegistration.dob.value == "" ) { alert( "Please provide your DOB!" ); document.StudentRegistration.dob.focus() ; return false; } if( document.StudentRegistration.mobileno.value == "" || isNaN( document.StudentRegistration.mobileno.value) || document.StudentRegistration.mobileno.value.length != 10 ) { alert( "Please provide a Mobile No in the format 123." ); document.StudentRegistration.mobileno.focus() ; return false; } return( true ); } 

Сообщите мне, если это сработало, или любой другой вопрос, с которым вы столкнулись.