html 用js实现不同input框焦点切换
页面上只有3个input输入框，首先焦点在第一个输入框中，我要的效果是除非鼠标点击第二个或第三个输入框让他们获取焦点，否则无论鼠标点击哪里，焦点都会在第一个输入框中，这个...
页面上只有3个input输入框，首先焦点在第一个输入框中，我要的效果是除非鼠标点击第二个或第三个输入框让他们获取焦点，否则无论鼠标点击哪里，焦点都会在第一个输入框中，这个效果怎么实现？？？ 求助！！！
同理，当焦点在第二个输入框中的时候，除非鼠标点击第一个或第三个输入框让他们获得焦点，否则无论鼠标点击哪里，焦点都会在第二个输入框中。 展开
同理，当焦点在第二个输入框中的时候，除非鼠标点击第一个或第三个输入框让他们获得焦点，否则无论鼠标点击哪里，焦点都会在第二个输入框中。 展开
5个回答
展开全部
先判断input的value是否为空，再设置它的值。
不过如果你要实现那样的效果，建议你用placeholder属性可以直接使用实现，不需要设置获取焦点，离开焦点等事件。
不过如果你要实现那样的效果，建议你用placeholder属性可以直接使用实现，不需要设置获取焦点，离开焦点等事件。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
需要事件捕获，事件判断。给BODY绑定个点击事件。然后判断。事件冒泡位置。如果在2，3内，就丢失焦点。否则一直都为获得焦点。
追问
有具体代码吗？ 有代码更清楚些！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
有个比较简单的方法可以一试
<body>
<script type="text/javascript">
var o=null;
window.onload = function(){window.setInterval('if(o)o.focus();',100);};
</script>
<input type="text" value="保持焦点" onfocus="javascript:o=this;"><br>
<input type="text" value="保持焦点" onfocus="javascript:o=this;"><br>
<input type="text" value="保持焦点" onfocus="javascript:o=this;"><br>
<input type="text" value="测试用的">
<input type="text" value="测试用的">
</body>
<body>
<script type="text/javascript">
var o=null;
window.onload = function(){window.setInterval('if(o)o.focus();',100);};
</script>
<input type="text" value="保持焦点" onfocus="javascript:o=this;"><br>
<input type="text" value="保持焦点" onfocus="javascript:o=this;"><br>
<input type="text" value="保持焦点" onfocus="javascript:o=this;"><br>
<input type="text" value="测试用的">
<input type="text" value="测试用的">
</body>
追问
window.setInterval('if(o)o.focus();',100);
这个循环事件对浏览器的压力大吗？对性能有影响吗？
追答
如果页面没有其它地方使用计时器,页面中的动态GIF,Flash很少的话,这个影响应该是很径微的,只是两条语句而已(如果给o一个初始值的话,if(o)也可以省去),如果担心性能损失,可将时间适当延长一些,但是"立即"的效果会有些延迟.
如果页面中元素比较少的话,也可以试试不用定时,而是遍历所有元素并绑定所有元素的onfocus事件,将焦点设回o
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
输入框1.onblur=function (){
if !((输入框2.focused)or(输入框3.focused)){输入框1.setfocus()}
}
大概思路吧，在手机端答的，没注意大小写，没注意单词，你自己再修改下
if !((输入框2.focused)or(输入框3.focused)){输入框1.setfocus()}
}
大概思路吧，在手机端答的，没注意大小写，没注意单词，你自己再修改下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
var f1Focus = false;
var f2Focus = false;
var f3Focus = false;
function bodyOnClick() {
document.body.style.backgroundColor = 'gray';
//alert(f2Focus + "," + f3Focus);
if (!f2Focus && !f3Focus)
{
document.getElementById("input1").focus();
}
}
function fun1(ele) {
f1Focus = true;
f2Focus = false;
f3Focus = false;
}
function fun2(ele) {
f1Focus = false;
f3Focus = false;
f2Focus = true;
}
function fun3(ele) {
f1Focus = false;
f2Focus = false;
f3Focus = true;
}
function fun1_1() {
f1Focus = false;
}
function fun2_1() {
f2Focus = false;
}
function fun3_1() {
f3Focus = false;
}
//-->
</SCRIPT>
</HEAD>
<BODY onclick = "bodyOnClick();">
输入框1：<INPUT TYPE="text" NAME="input1" id="input1" onfocus="fun1(this);" onblur="fun1_1();">
输入框2：<INPUT TYPE="text" NAME="input2" onfocus="fun2(this);" onblur="fun2_1();">
输入框3：<INPUT TYPE="text" NAME="input3" onfocus="fun3(this);" onblur="fun3_1();">
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
var f1Focus = false;
var f2Focus = false;
var f3Focus = false;
function bodyOnClick() {
document.body.style.backgroundColor = 'gray';
//alert(f2Focus + "," + f3Focus);
if (!f2Focus && !f3Focus)
{
document.getElementById("input1").focus();
}
}
function fun1(ele) {
f1Focus = true;
f2Focus = false;
f3Focus = false;
}
function fun2(ele) {
f1Focus = false;
f3Focus = false;
f2Focus = true;
}
function fun3(ele) {
f1Focus = false;
f2Focus = false;
f3Focus = true;
}
function fun1_1() {
f1Focus = false;
}
function fun2_1() {
f2Focus = false;
}
function fun3_1() {
f3Focus = false;
}
//-->
</SCRIPT>
</HEAD>
<BODY onclick = "bodyOnClick();">
输入框1：<INPUT TYPE="text" NAME="input1" id="input1" onfocus="fun1(this);" onblur="fun1_1();">
输入框2：<INPUT TYPE="text" NAME="input2" onfocus="fun2(this);" onblur="fun2_1();">
输入框3：<INPUT TYPE="text" NAME="input3" onfocus="fun3(this);" onblur="fun3_1();">
</BODY>
</HTML>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
