Purely as an experiment, I am trying to make it absolutely impossible to do anything but enter more data into an input field; feasible?

Question

I've come very close, I think, but can't seem to cover every single one of the fronts listed below:

• disable use of backspace, delete, left arrow key, home key, and ctrl for various reasons (all of which prove difficult once you factor in the confusion caused by holding down two at the same time)
• make certain that the user cannot exit the field and then re-enter in a loation other than the end (onfocus and onclick attributes cover this)
• the toughy: remember the value every time a character is successfully added such that if the user decides to modify the value with JavaScript code injected via the location bar, the original data can be restored

Seeing as how there'd be very little (zero, to be honest) practical use for this, I'm merely pursuing it as a demonstration of knowledge. Alas, it seems I haven't enough; nonetheless, here's the code I'm presently working with for reference:

<input id="test" />
<script>
var d = '', kd = 0;
cancel = function(event)
 {
    event.target.value = '';
    event.target.value = d;
 };
handle_up = function(event)
 {
    if (event.keyCode == 36 || event.keyCode == 37) // home, left
     {
     kd = 0;
     cancel(event);
     event.target.value = d;
     }
    if (event.keyCode != 8 && event.keyCode != 46) // backspace and delete
     d = event.target.value;
    else // backspace
     event.target.value = d; // set to stored ("cached") value
 };
handle_down = function(event)
 {
    if (kd == 1)
     {
     cancel(event);
     return false;
     }
    if (event.keyCode == 36 || event.keyCode == 37)
     {
     kd = 1;
     cancel(event);
     }
    if (event.keyCode == 8 || event.keyCode == 46)
     {
     kd = 1;
     cancel(event);
     }
 };
HTMLElement.prototype.perma = function()
 {
    this.setAttribute('onfocus', 'cancel(event)');
    this.setAttribute('onclick', 'cancel(event)');
    this.setAttribute('onkeyup', 'handle_up(event)');
    this.setAttribute('onkeydown', 'handle_down(event)');
 };
$('#test').perma();
</script>

Again, even though it'd just be for the sake of novelty, I think it'd be really cool to see the cleverness required to get an input box to deny any action but data entry.

Answer 1

BTW since this is for fun. Have you tried to do a whitelist of what you can enter instead of a blacklist of what you can't do.

Answer 2

How about checking the inputted data, running a comparison on the new input, and refusing anything that isn't an extension of what was already there? A little lengthy, perhaps, especially as the field becomes longer, but effective?

Answer 3

Another thing to consider, is that validation schemes - such as the one you describe - should not take place purely on the client side.

If javascript is disabled, for example, it is possible for somebody to submit unvalidated data. If this occurs, the server side code will use it and the condition that you are testing for will go unnoticed.

Always backup client side validation with the same validation on the server.