Question

我有一个使用Java Script的Html页面，我在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中添加了最大长度和唯一数字。当我输入密码后，每个文本区域都被冻结。

如果我没有将这些验证放在密码文本区域，那么它永远不会冻结。

Answer 1

您遇到的问题是一个错误，已经报告为issue #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属性，以防止用户使用向上箭头键提供超过最大值的输入。

Answer 2

首先，你所说的不是文字区域。它只是一个文本提交。文本区域应该被定义为<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%;">

Answer 3

在HTML中，您可以使用max属性将最大长度设置为输入类型number。

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

有关HTML中maxLength属性的文档

<强>的maxlength

如果type属性的值是text，email，search，password，   tel或url，此＆gt;属性指定最大数量   用户可以输入的字符（在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)">

Answer 4

我认为实现目标的唯一方法是使用JavaScript。我会使用类似于Dileep的方法，但有一些区别：

我将保存最后输入的有效值并恢复为该值，而不是仅仅拼接当前值中的前六个字符。一个类似的功能，但据我所知，它更稳定。
我建议不要使用内联HTML事件回调，而是直接通过JavaScript中的DOM进行分配。有关这些方法之间差异的讨论，see this SO。
我还认为让输入框短暂闪烁不同的颜色，至少为了调试目的，有助于查看代码执行的时间和方式，如果有什么不起作用。
最后，我会使用<input type="tel"/>而不是<input type="number"/>。 tel仍会在移动设备上显示数字键盘，但与number不同，输入非数字数据时，不会有空value。（See this SO。）

我已将所有这些放入一个简短的JSFiddle中供您查看。如果它有帮助，请随意重复使用它： http://jsfiddle.net/VPL5e/1/

这可以解决您的问题吗？如果您还有其他需求，请询问！

Answer 5

你的html代码没有任何问题可能是问题在于＃34;表单验证＆＃34;。无论如何，我正在为您提供完整的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 );
}

让我知道它是否有效或您在此面临的任何其他问题。

在Java Script中验证文本区域会冻结所有文本区域

5 个答案: