单击div后将焦点返回到输入字段
[英]Returning focus to input field after clicking on div
问题描述
To make it easy to enter accented characters in an input field I display a pop-up div which shows the characters so you can select and click. 
为了便于在输入字段中输入重音字符，我会显示一个弹出div，显示字符，以便您选择并单击。 I want to keep the focus on the input field (or return it after any operations which take it away). 我希望将注意力集中在输入字段上（或在任何将其取走的操作之后将其返回）。 After clicking to enter an accent the focus will not return under javascript control. 单击以输入重音后，焦点将不会在javascript控制下返回。 I've tested with Mac Safari and Firefox but no go. 我已经使用Mac Safari和Firefox进行了测试，但没有去过。 Ultimately it will need to work on all platforms. 最终它需要在所有平台上运行。
Any help much appreciated. 任何帮助非常感谢。
David 大卫
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" charset="utf-8">
var showaccentswindow = 0;
function displayaccents() {
if (showaccentswindow==0) {
document.getElementById('accentswindow').style.display='block';
showaccentswindow=1;
}
else
{
document.getElementById('accentswindow').style.display='none';
showaccentswindow=0;
}
document.getElementById('inputbox').focus();
}
function insertchar(c) {
/*for inserting accented chars*/
document.getElementById('inputbox').value=document.getElementById('inputbox').value + c;
document.getElementById('inputbox').focus(); **// DOESN'T WORK!!!**
}
</script>
<style type="text/css">
#accentswindow {
display:none;
position:absolute;
top: 50px;
background-color: #FFF;
width: 200px;
border: 2px solid #999;
z-index: 100;
left: 150px;
text-align: left;
padding-bottom: 20px;
padding-left: 20px;
}
.accentlink {
background-color: #F3EED7;
text-align: center;
display: block;
float: left;
height: 22px;
width: 17px;
margin-top: 9px;
margin-right: 3px;
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
font-weight: bold;
color: #666;
cursor: pointer;
}
</style>
</head>
<body onload="document.getElementById('inputbox').focus();">
<div id="accentswindow" >
<div class="accentlink" onmousedown="insertchar('À')">À</div>
<div class="accentlink" onmousedown="insertchar('Û')">Û</div>
<img src="http://www.revilolang.com/images/closebox.png" width="28" height="26" style="float:right;" onmouseup="displayaccents()"/> </div>
<input name="" id="inputbox" type="text" />
<input name="accents" type="button" value="accents"onclick="displayaccents()" />
</body>
</html>
3 个解决方案
解决方案1
3 已采纳 2013-01-29 15:01:58
Since mouseup "still" the focus again you should add a listener to set the focus 由于mouseup“仍然”成为焦点，你应该添加一个监听器来设置焦点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" charset="utf-8">
var showaccentswindow = 0;
function displayaccents() {
if (showaccentswindow==0) {
document.getElementById('accentswindow').style.display='block';
showaccentswindow=1;
}
else
{
document.getElementById('accentswindow').style.display='none';
showaccentswindow=0;
}
document.getElementById('inputbox').focus();
}
function insertchar(c) {
/*for inserting accented chars*/
document.getElementById('inputbox').value=document.getElementById('inputbox').value + c;
// DOESN'T WORK!!!**
}
function addListeners(){
document.getElementById('accentswindow').addEventListener("mouseup",function(){
document.getElementById('inputbox').focus();
})
}
</script>
<style type="text/css">
#accentswindow {
display:none;
position:absolute;
top: 50px;
background-color: #FFF;
width: 200px;
border: 2px solid #999;
z-index: 100;
left: 150px;
text-align: left;
padding-bottom: 20px;
padding-left: 20px;
}
.accentlink {
background-color: #F3EED7;
text-align: center;
display: block;
float: left;
height: 22px;
width: 17px;
margin-top: 9px;
margin-right: 3px;
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
font-weight: bold;
color: #666;
cursor: pointer;
}
</style>
</head>
<body onload="addListeners();document.getElementById('inputbox').focus();">
<div id="accentswindow" >
<div class="accentlink" onmousedown="insertchar('À')">À</div>
<div class="accentlink" onmousedown="insertchar('Û')">Û</div>
<img src="http://www.revilolang.com/images/closebox.png" width="28" height="26" style="float:right;" onmouseup="displayaccents()"/> </div>
<input name="" id="inputbox" type="text" />
<input name="accents" type="button" value="accents"onclick="displayaccents()" />
</body>
</html>
解决方案2
1 2013-01-29 14:54:46
Well, you would have to bind the focus to the unfocus (blur) action 好吧，你必须将焦点绑定到非聚焦（模糊）动作
If you had jQuery you could do something like: 如果你有jQuery，你可以做类似的事情：
inputbox.blur(function(){
inputbox.focus();
});
plain javascript would be something like: 普通的javascript会是这样的：
inputbox.onblur=function(){
inputbox.focus();
};
解决方案3
1 2013-01-29 15:03:45
Just add onclick = "document.getElementById('inputbox').focus();" 只需添加onclick = "document.getElementById('inputbox').focus();" on each accentlink DIV. 在每个accentlink DIV上。
For example: 例如：
<div class="accentlink" onclick = "javascript:document.getElementById('inputbox').focus();" onmousedown="javascript:insertchar('À');">À</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.