Having a permanent value in an input field while still being able to add text to it

I don't know if this is possible but I would like to have an input field where I would have a value that is not editable by the user. However, I don't want the input field to be "readonly" because I still want the user to be able to add text after the value.

开发者_StackOverflow中文版

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

EDIT: I use html forms.

---

You can position the text on top of the input field to make it look as if it is inside it. Something like this:

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

This way your input field will start with "19" which can not be edited, and the user can add information behind this.

Basically what you do is set the input field to a fixed width, so that you know how much negative margin-left to give the span with your text in it in order for it to be positioned exactly at the start of the input field.

You might need to fiddle with the margin-left of the span depending on the rest of your css.

Then also adding pedding-left to the input field, to make sure the user starts typing after your text and not under it.

font:inherit should make sure both your text and the text typed by the user are in the same font.

And if you want to put anything to the right of this input field, do add margin-right to the span with your text, as otherwise other content might start running over your input field as well.

---

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

like sometimes used for the birthdate (although, maybe not anymore..)

birthyear: 19[input field]

edit:

with some javascript stuff you could realise something like that you asked for, though an input field with text and catching keystrokes within that field while only allowing some after what you want to be always there - but, well, you would need to use js ..and if its just for that, Id rather say its not necessary

edit:

if you want to use a trick just for the viewer you could use a background-image/border-style that surrounds a text and the input field, thus making it look like text and input are the same input-box.

---

Sounds like you want placeholder text. In HTML5 you can set the placeholder attribute on any input element. This will work in modern browsers.

<input type="email" placeholder="jappleseed@appletree.com" name="reg_email" />

Now, for older browsers this won't work. You'll need a JavaScript alternative to provide the same UI value.

This can work for all browsers:

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

but it's not recommended because there is a better way (really, it's a combination of the first two approaches): Use HTML5 markup for new browsers; jQuery and modernizr for old browsers. This way you can have only one set of code that will support all user cases.

Taken directly from 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>

[You'll need both jquery.js and modernizr.js installed in the same folder as your webpage.]

Note: I have a feeling that a little more research might reveal that modernizr isn't needed for this at all, though I could be wrong about that particular point.

---

Perhaps, then, you want a select menu?

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

Sorry if this isn't what you want either. I'm grasping at straws because what you are asking for is very vague. Maybe you should give an example of what one of these 'editable but not editable' inputs would be used for.

Also, you could use a select and a text input.

---

The main problem is to determine the position of the cursor. This can be done e.g. using the following function:

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

Now you can install an event handler for the key press and check whether the pressed key was inside the immutable part of the value of the textarea. If it was there the event handler returns false, otherwise true. This behavior can be wrapped into a simple object:

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).

---

I came up with this: ```

if (e.target.value == '' || e.target.value.length <= 3) {
   e.target.value = '+91-';
}

```