Returning focus to input field after clicking on div
Question
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. 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. I've tested with Mac Safari and Firefox but no go. 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 answers
solution1
3 ACCPTED 2013-01-29 15:01:58
Since mouseup "still" the focus again you should add a listener to set the focus
<!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>
solution2
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:
inputbox.blur(function(){
inputbox.focus();
});
plain javascript would be something like:
inputbox.onblur=function(){
inputbox.focus();
};
solution3
1 2013-01-29 15:03:45
Just add onclick = "document.getElementById('inputbox').focus();" on each accentlink DIV.
For example:
<div class="accentlink" onclick = "javascript:document.getElementById('inputbox').focus();" onmousedown="javascript:insertchar('À');">À</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Returning focus to input after clicking button not working
How to load a div using jQuery after moving the focus to an input field?
Focus a contenteditable div after double clicking on it
After alert focus on input field
Tooltip after input field focus
jquery input field focus out except a div
Select by double clicking or a single letter a div that makes focus an input
Focus on an input after div mounted Vue
Calender not showing after clicking on icon but showing after clicking on input field
Text in an input field disappears after changing focus
Related Tags