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" ".dtd">
<html xmlns="">
<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=".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>
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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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./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
Reset to default 3Since 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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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./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>
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();
};
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>