Reputation: 366
I tried to create something like a "virtual" keypad for entering some special characters in a textbox. The following implementation works OK in Chrome but not in any other browser.
How can this be modified to work in the majority of browsers (FF, IE, Chrome) and also have it support caret position in the case where I need to have more than one input fields?
The code as follows:
<html>
<head>
<style type="text/css">
.key {
padding: 10px;
margin: 0px;
background-color: #f3f3f3;
display: inline-block;
}
</style>
</head>
<body>
<form name="form1">
Text: <input type="text" name="field1"><br>
<br>
<a href="javascript:document.form1.field1.value=document.form1.field1.value+'Æ';return false;" class="key">Æ</a>
<a href="javascript:document.form1.field1.value=document.form1.field1.value+'ø';return false;" class="key">ø</a>
</form>
</body>
</html>
I also have tried changing this
<a href="javascript:document.form1.field1.value=document.form1.field1.value+'Æ';return false;" class="key">Æ</a>
to this:
<a href="javascript:document.forms("form1").field1.value=document.forms("form1").field1.value+'Æ';return false;" class="key">Æ</a>
Upvotes: 0
Views: 467
Reputation: 3145
There are many different ways to do this, I attached event handlers. I recommend JQuery .on() or .click() events. Also try not to do inline JS, its very bad practice.
var Key248Btn = document.getElementById('Key248Btn');
Key248Btn.addEventListener("click", Key248_Click, false);
function Key198_Click()
{
textEntryField.value += "\u00e6";
return false;
}
Upvotes: 1