javascript persistent selection

Question

I need to only have 1 character at any time in an input field. The only way I can think of doing this is by having javascript keep everything in the box always selected and making the maximum input length 1 so that when I type something new, whatever was in there gets overwritten (since it is selected). That way I don't have to use backspace or anything. So far I have only gotten as far as getting everything to select when you click in the box. I have this:

input type="text" id="txt1" size="30" maxlength="1" onkeyup="showHint(this.value)" onFocus="this.select()" onBlur="this.select()" onClick="SelectAll('txt1');" value="Click here, then press a key"/>

I have a couple different things going on in there to try to get it all selected (like the onFocus and the onBlur which don't work). Any idea how I could keep everything in that box permanently selected? Or is there a better way altogether to keep a single character in the box?

Answer 1

What about instead, just handling the key events, returning false (blocking the character from actually getting inserted) and have a DIV or something else actually persist the key you are interested in?

Answer 2

Onfocus should work for tabbing into the field, but you would also need to capture OnClick, since the click moves the cursor (thus de-selecting) as well as selecting the field.

Answer 3

What's wrong with doing it in HTML?

<input maxlength="1"/>

Answer 4

If you're using jQuery (which I would highly recommend) you can simply attach the keybinding event to update the value. I accidentally came across this a few weeks ago:

$("#my_input").keyup(function(event) {
  $(this).val(String.fromCharCode(event.keyCode));
});

Answer 5

How about this algorithm:

onfocus : select all content
onkeydown : delete all content
onkeyup : select all content

If you need the content to always be valid (i.e., you need to have one valid character in the box) you can do some extra validation on keyup and blur. If the value is valid save the valid value somewhere. If the value is not valid restore the previous valid value.

This would handle the situation where the key being pressed was something like the "tab" or "enter" buttons.

This logic may not work depending on what other actions you are taking on key presses, if any. But given the parameters in your question, this sounds like this will work.

Proof of concept code. Modify to your problem and tastes.

    <input id="test" onkeydown="deleteAllContent();" onfocus="selectAllContent();"
    onkeyup="validate();selectAllContent();" onblur="validate();" maxLength="1">
    <script>
var lastValid = "B";
function deleteAllContent() {
    document.getElementById('test').value = '';
}

function selectAllContent() {
    document.getElementById('test').select();
}

function validate() {
    var value = document.getElementById('test').value;

    if (value.length == 0) { // or whatever makes the value invalid
     document.getElementById('test').value = lastValid;
    } else {
     lastValid = value;
    }
}
</script>