Having constant value in the input field, still having the ability to add text to it

Question

I do not know if this is possible, but I would like to have an input field in which I will have a value that is not edited by the user. However, I do not want the input field to be "readonly" because I still want the user to be able to add text after the value.

If you have any ideas on how to do this, please let me know that this will help me a lot.

EDIT: I am using html forms.

Answer 1

seems a little strange to me .. why not just use the text output and then the input field?

(, , ..)

birthyear: 19[input field]

:

javascript - , , , , , - , , js.. , Id ,

:

, background-image/border-style, , .

Answer 2

, , . - :

<input type="text" name="year" style="width:3.5em;padding-left:1.5em;font:inherit"><span style="margin-left:-3em;margin-right:10em;">19</span>

, "19", , .

, , , , , , .

, css.

pedding-left, , .

font: inherit , , , , .

- , margin-right , .

Answer 3

, , . HTML5 placeholder input. .

<input type="email" placeholder="[e-mail]" name="reg_email" />

. JavaScript, .

:

<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">

, ( ): HTML5 ; jQuery modernizr . , , .

webdesignerwall.com:

<script src="jquery.js"></script>
<script src="modernizr.js"></script>

<script>
$(document).ready(function(){

if(!Modernizr.input.placeholder){

    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });

}

</script>

[ jquery.js, modernizr.js, , -.]

. , , , .

Answer 4

, select?

<select name="mySelectMenu">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
</select>

, , . , , , . , , ", " .

, select text.

Answer 5

. , , :

function getCaret(el) {
    var pos = -1; 
    if (el.selectionStart) { 
        pos = el.selectionStart;
    } 
    else if (document.selection) { 
        el.focus();         
        var r = document.selection.createRange(); 
        if (r != null) { 
            var re = el.createTextRange(); 
            var rc = re.duplicate(); 
            re.moveToBookmark(r.getBookmark()); 
            rc.setEndPoint('EndToStart', re);       
            pos = rc.text.length; 
        }
    }  
    return pos; 
}

, . , false, true. :

function Input(id, immutableText) {
    this.el = document.getElementById(id);
    this.el.value = immutableText;
    this.immutableText = immutableText;
    this.el.onkeypress = keyPress(this);
}    
function keyPress(el) {
    return function() {
        var self = el; 
        return getCaret(self.el) >= self.immutableText.length;
    }
}    
Input.prototype.getUserText = function() {
    return this.el.value.substring(this.immutableText.length);
};
var input = new Input("ta", "Enter your name: ");
var userText = input.getUserText(); 

You can check it on jsFiddle (use Firefox or Chrome).