Question

I have an <input> html element.
The element is filled by default value.
User should be able to append new text at the end of default text but could not delete default value.
How could I solve this problem?

Answer 1

You can do this with JavaScript:

listen('load', window, init);

function init() {
  var test = document.getElementById('test');
  var val = test.value;
  listen('keydown', test, replaceVal);
  listen('keyup', test, replaceVal);
  function replaceVal() {
    tempVal = test.value;
    if (tempVal.indexOf(val) === -1) {
      tempVal = val;
      test.value = val;
    }
  }
}

function listen(event, elem, func) {
  if (elem.addEventListener) {
    elem.addEventListener(event, func, false);
  } else if (elem.attachEvent) {
    elem.attachEvent('on' + event, func);   
  }
}

I have set up a jsFiddle here: http://jsfiddle.net/sjfwz/
​