Checking text area in Java Script freezes all text areas

I have an Html page that is being used Java Script, and I open this page inWebView

My problem is when I allowed checking the maximum length in the text area, and then after checking the text area all the text areas on the page freeze, and I cannot edit or delete from any text area.

Please help me solve this problem, which after checking the text areas does not block the text area.

My HTML page is like      

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

I added the maximum length and only the number in the Pincode text area. when I entered the PIN after each text area freezes.

If I had not placed this check in the pincode text area, it never hangs.

+4
5

, , ​​ № 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 , .
+5

, , . . <textarea rows="10" cols="15"></textarea>.

maxlength , . maxlength='6' , , , , 6 .

, . : style="width:100px;max-width:60%;". .. <input type="number" maxlength='6' name="pincode" id="pincode" size="30" style="width:100px;max-width:60%;">

0

HTML max number.

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

maxLength HTML

MaxLength

type , , , , tel url, > ( Unicode), ; , . . , . ; . , .

, 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)"> 
0

, , , - JavaScript. , Dileep, :

  • , , . , , .
  • HTML- DOM JavaScript. . SO.
  • , , , , , - .
  • , <input type="tel"/>, <input type="number"/>. tel , number value, . ( .)

JSFiddle, . , : http://jsfiddle.net/VPL5e/1/

Does this solve your problem? If you need anything else, ask!

0
source

There is nothing wrong with your html code, as the problem is "form validation". In any case, I provide you with the full html code and form validation code.

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>

Form validation

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 );
}

let me know if this worked, or any other problems you encountered.

0
source

Source: https://habr.com/ru/post/1535681/


All Articles