684
社区成员
发帖
与我相关
我的任务
分享focus 问题（在线等）
三个textbox，输入完第一个鼠标移动到第二个textbox时，就没有focus了，但是如果我输入完第一个，点击页面任意空白处，focus就会出现。
<tr>
<th> Apple </th>
<td> $0.69 </td>
<td> <input type = "text" name = "apple" id = "apple" value = "0"
size ="2" onchange= "chkQty(id);computeCost();"/> </td>
</tr>
<tr>
<th> Orange </th>
<td> $0.59 </td>
<td> <input type = "text" name = "orange" id = "orange" value = "0"
size = "2" onchange= "chkQty(id);computeCost();"/> </td>
</tr>
<tr>
<th> Banana </th>
<td> $0.39 </td>
<td> <input type = "text" name = "banana" id = "banana" value = "0"
size = "2" onchange= "chkQty(id);computeCost();"/></td>
</tr>
</table>
下面是我的chkQty function:
function chkQty(id) {
var myQty = document.getElementById(id);
var pos = myQty.value.search(/\d+/);
if (pos != 0) {
alert("The quanity you entered (" + myQty.value +
") is invalid. \n" +
"Please enter digits for quantity");
myQty.focus();
myQty.select();
return false;
} else
return true;
}
大家帮帮忙了
多谢
<tr>
<th> Apple </th>
<td> $0.69 </td>
<td> <input type = "text" name = "apple" id = "apple" value = "0"
size ="2" onchange= "chkQty(id);computeCost();"/> </td>
</tr>
<tr>
<th> Orange </th>
<td> $0.59 </td>
<td> <input type = "text" name = "orange" id = "orange" value = "0"
size = "2" onchange= "chkQty(id);computeCost();"/> </td>
</tr>
<tr>
<th> Banana </th>
<td> $0.39 </td>
<td> <input type = "text" name = "banana" id = "banana" value = "0"
size = "2" onchange= "chkQty(id);computeCost();"/></td>
</tr>
</table>
下面是我的chkQty function:
function chkQty(id) {
var myQty = document.getElementById(id);
var pos = myQty.value.search(/\d+/);
if (pos != 0) {
alert("The quanity you entered (" + myQty.value +
") is invalid. \n" +
"Please enter digits for quantity");
myQty.focus();
myQty.select();
return false;
} else
return true;
}
大家帮帮忙了
多谢
...全文
请发表友善的回复…
发表回复
purple_yuanling 2010-03-27
- 打赏
- 举报
用一个setTimeout就好了
谢谢大家了
谢谢大家了
hoojo 2010-03-26
- 打赏
- 举报
呵呵，输入完后。程序怎么知道有没有输入完，当输入完的时候再调用获得下一个区域的
焦点focus；
chenbin520 2010-03-26
- 打赏
- 举报
有本书中这样讲：
如下事件绑定
<input type = "text" name = "apple" id = "apple" value = "0"
size ="2" onchange= "return chkQty(id);"/>
等价于如下绑定
document.getElementById("apple").onchange = function(){
return chkQty( );
}
（参数如何传递，我也不大清楚。）
这样就可以理解为什么在标签中绑定事件需要return才能阻止默认事件了。
如下事件绑定
<input type = "text" name = "apple" id = "apple" value = "0"
size ="2" onchange= "return chkQty(id);"/>
等价于如下绑定
document.getElementById("apple").onchange = function(){
return chkQty( );
}
（参数如何传递，我也不大清楚。）
这样就可以理解为什么在标签中绑定事件需要return才能阻止默认事件了。
purple_yuanling 2010-03-25
- 打赏
- 举报
[Quote=引用楼主 purple_yuanling 的回复:]
三个textbox，输入完第一个鼠标移动到第二个textbox时，就没有focus了，但是如果我输入完第一个，点击页面任意空白处，focus就会出现。
<tr>
<th> Apple </th>
<td> $0.69 </td>
<td> <input type = "text" name = "apple" id = "apple" value = "0"
size ="2" onch……
[/Quote]
谢谢回复。这样问题是可以解决了。
但是为什么下面的代码就可以正确执行
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- validator.html
An example of input validation using the change event
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Illustrate form input validation> </title>
<script type = "text/javascript">
<!--
// The event handler function for the name text box
function chkName() {
var myName = document.getElementById("custName");
var pos = myName.value.search(/\d+/);
if (pos != 0) {
alert("The quanity you entered (" + myName.value +
") is invalid. \n" +
"Please enter digits for quantity");
myName.focus();
myName.select();
return false;
} else
return true
}
// The event handler function for the phone number text box
function chkPhone() {
var myPhone = document.getElementById("phone");
// Test the format of the input phone number
var pos = myPhone.value.search(/^\d{3}-\d{3}-\d{4}$/);
if (pos != 0) {
alert("The phone number you entered (" + myPhone.value +
") is not in the correct form. \n" +
"The correct form is: ddd-ddd-dddd \n" +
"Please go back and fix your phone number");
myPhone.focus();
myPhone.select();
return false;
} else
return true;
}
// -->
</script>
</head>
<body>
<h3> Customer Information </h3>
<form action = "">
<p>
<input type = "text" id = "custName" />
Name (last name, first name, middle initial)
<br /><br />
<input type = "text" id = "phone" />
Phone number (ddd-ddd-dddd)
<br /><br />
<input type = "reset" id = "reset" />
<input type = "submit" id = "submit" />
</p>
</form>
<script type = "text/javascript">
<!--
// Set form element object properties to their
// corresponding event handler functions
document.getElementById("custName").onchange = chkName;
document.getElementById("phone").onchange = chkPhone;
// -->
</script>
</body>
</html>
三个textbox，输入完第一个鼠标移动到第二个textbox时，就没有focus了，但是如果我输入完第一个，点击页面任意空白处，focus就会出现。
<tr>
<th> Apple </th>
<td> $0.69 </td>
<td> <input type = "text" name = "apple" id = "apple" value = "0"
size ="2" onch……
[/Quote]
谢谢回复。这样问题是可以解决了。
但是为什么下面的代码就可以正确执行
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- validator.html
An example of input validation using the change event
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Illustrate form input validation> </title>
<script type = "text/javascript">
<!--
// The event handler function for the name text box
function chkName() {
var myName = document.getElementById("custName");
var pos = myName.value.search(/\d+/);
if (pos != 0) {
alert("The quanity you entered (" + myName.value +
") is invalid. \n" +
"Please enter digits for quantity");
myName.focus();
myName.select();
return false;
} else
return true
}
// The event handler function for the phone number text box
function chkPhone() {
var myPhone = document.getElementById("phone");
// Test the format of the input phone number
var pos = myPhone.value.search(/^\d{3}-\d{3}-\d{4}$/);
if (pos != 0) {
alert("The phone number you entered (" + myPhone.value +
") is not in the correct form. \n" +
"The correct form is: ddd-ddd-dddd \n" +
"Please go back and fix your phone number");
myPhone.focus();
myPhone.select();
return false;
} else
return true;
}
// -->
</script>
</head>
<body>
<h3> Customer Information </h3>
<form action = "">
<p>
<input type = "text" id = "custName" />
Name (last name, first name, middle initial)
<br /><br />
<input type = "text" id = "phone" />
Phone number (ddd-ddd-dddd)
<br /><br />
<input type = "reset" id = "reset" />
<input type = "submit" id = "submit" />
</p>
</form>
<script type = "text/javascript">
<!--
// Set form element object properties to their
// corresponding event handler functions
document.getElementById("custName").onchange = chkName;
document.getElementById("phone").onchange = chkPhone;
// -->
</script>
</body>
</html>
purple_yuanling 2010-03-25
- 打赏
- 举报
[Quote=引用 2 楼 llyy112233 的回复:]
你想做成什么效果呢？？
是不是一个值输完后，如果点击页面空白处，就把focus跳到下一个输入框？？
[/Quote]
一个值输入完以后，点击下一个textbox,focus还是在第一个textbox
我现在的问题是select第一个textbox以后，马上就跳到下一个textbox了，而不是停留在第一个
你想做成什么效果呢？？
是不是一个值输完后，如果点击页面空白处，就把focus跳到下一个输入框？？
[/Quote]
一个值输入完以后，点击下一个textbox,focus还是在第一个textbox
我现在的问题是select第一个textbox以后，马上就跳到下一个textbox了，而不是停留在第一个
llyy112233 2010-03-25
- 打赏
- 举报
你想做成什么效果呢？？
是不是一个值输完后，如果点击页面空白处，就把focus跳到下一个输入框？？
是不是一个值输完后，如果点击页面空白处，就把focus跳到下一个输入框？？
chenbin520 2010-03-25
- 打赏
- 举报
我不知道你要实现什么样的逻辑。
问题出在你虽然chkQty中返回了false,但onchange= "chkQty(id);computeCost();"中没有返回，
所以不能阻止默认事件。
你可以把代码写成这样
<input type = "text" name = "apple" id = "apple" value = "0"
size ="2" onchange= "return chkQty(id);"/>
然后让computeCost();方法在chkQty方法里执行。就好了
问题出在你虽然chkQty中返回了false,但onchange= "chkQty(id);computeCost();"中没有返回，
所以不能阻止默认事件。
你可以把代码写成这样
<input type = "text" name = "apple" id = "apple" value = "0"
size ="2" onchange= "return chkQty(id);"/>
然后让computeCost();方法在chkQty方法里执行。就好了
