关于javascript：在Javascript中验证textarea会冻结所有文本区


Validating text area in Java Script freezes all text areas

我有一个使用Java Script的HTML页面，我正在WebView

中打开该页面

我的问题是，当我在文本区域上启用最大长度验证时，然后在验证文本区域后，页面中的所有文本区域都被冻结，并且我无法从任何文本区域进行编辑或删除。

请帮助我解决以下问题：验证文本区域后，不会冻结任何文本区域。

我的HTML页面为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
    <table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
        cellspacing="2">

        <tr>
            <td colspan=2>
                <center>
                    <font size=4>Student Registration Form</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文本区域中添加了最大长度和唯一数字。当我输入密码后，每个文本区域都被冻结。

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

相关讨论

您面临的问题是一个错误，已经被报告为问题#35264。

我在jsfiddle上为此创建了一种解决方法。为了方便起见，请在下面粘贴代码。

HTML：

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

Javascript：

1
2
3
4
5
6
7
var pincode = document.getElementById('pincode');
var maxLength = pincode.maxLength;
pincode.onkeypress = function(e){
    if( pincode.value.length >= maxLength ){
        return false;
    }
};

解决方案是，仅确保输入元素的内容不超过最大限制。

  • 在每次按键事件中，将输入值的长度与最大长度进行比较。如果更多，则返回false，以便将输入丢弃。
  • 在输入元素上设置max属性，以防止用户使用向上箭头键提供超过最大值的输入。
相关讨论

您的html代码中没有错，可能是因为"表单验证"中存在此问题。
无论如何，我正在为您提供完整的html和表单验证代码。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
    <html>
<head>
<script type="text/javascript" src="validate.js">
</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>Student Registration Form</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>

表格验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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 );
}

让我知道它是否有效，或者您在此过程中遇到任何其他问题。

相关讨论

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

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

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

这可以解决您的问题吗？如果您还需要其他任何内容，请询问！

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

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

有关HTML

中maxlength属性的文档

maxlength

If the value of the type attribute is text, email, search, password,
tel, or url, this >attribute specifies the maximum number of
characters (in Unicode code points) that the user can enter; for other
control types, it is ignored. It can exceed the value of the size
attribute. If it is not specified, the user can enter an unlimited
number of characters. Specifying a negative number results in the
default behavior; that is, the user can enter an unlimited number of
characters. The constraint is evaluated only when the value of the
attribute has been changed.

Thus its designed to be ignored for input type="number"

在此处查找<输入>

的完整属性描述集

它只会将允许的最大数量设置为指定的最大值，不会阻塞比max Value更大的值。 Max属性显示一个错误弹出窗口，表明已超出限制。

如果要阻止文本值不大于6，可以使用JavaScript

脚本

1
2
3
4
5
    function validateLength(obj)
    {
        if(obj.value.length > 6)
            obj.value = obj.value.substr(0, 6);
    }

HTML

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

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