CODEWITHSUNDEEP
javascriptinputhref
serge
serge

Reputation: 366

Input text from href click

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+'&#198;';return false;" class="key">&#198;</a> 

<a href="javascript:document.form1.field1.value=document.form1.field1.value+'&#248;';return false;" class="key">&#248;</a> 


</form>

</body>
</html>

I also have tried changing this 

<a href="javascript:document.form1.field1.value=document.form1.field1.value+'&#198;';return false;" class="key">&#198;</a>

to this:

<a href="javascript:document.forms("form1").field1.value=document.forms("form1").field1.value+'&#198;';return false;" class="key">&#198;</a>

Upvotes: 0

Views: 467

Answers (1)

Victorio Berra
Victorio Berra

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;
}

http://jsfiddle.net/HGDZ3/3/

Upvotes: 1

Related Questions