javascript - 在 Javascript 中验证文本区域会卡住所有文本区域

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 文本区域中添加了最大长度和唯一数字。当我输入密码后，每个文本区域都被卡住。

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

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 以便丢弃输入。
• 在 input 元素上设置 max 属性，以防止用户使用向上箭头键提供超过最大值的输入。