I know I can disable/lock part of an input box using

<input type="text" disabled="disabled"/>

or

<input type="text" readonly="readonly"/>

but I want to have

<input type="text" value="[[inputbox|edithere]]"/>

where the user can only edit edithere

I have tried to google this, however the only related things I can find are how to disable an input box pletely or disable certain keys.

I don't know the input boxes id or how many there are (dynamically created via php onload), but I know that they will always be a pipeline and two ]] bookending the value I want to edit.

EDIT

/

I know I can disable/lock part of an input box using

<input type="text" disabled="disabled"/>

or

<input type="text" readonly="readonly"/>

but I want to have

<input type="text" value="[[inputbox|edithere]]"/>

where the user can only edit edithere

I have tried to google this, however the only related things I can find are how to disable an input box pletely or disable certain keys.

I don't know the input boxes id or how many there are (dynamically created via php onload), but I know that they will always be a pipeline and two ]] bookending the value I want to edit.

EDIT

http://jsfiddle/7rTMK/

• javascript
• jquery
• html

• 1 You want a text input to work like a text input? – Rooster Commented Jun 26, 2013 at 18:49
• 1 Use a label with the data that will prepended onto the user's data so they can see that data and add their own to the text box. – Jake Sellers Commented Jun 26, 2013 at 18:49
• 3 How about [[inputbox| <input type="text" placeholder="edithere" />]]? – Selvakumar Arumugam Commented Jun 26, 2013 at 18:50
• 1 You can't, there's no way to to this. Graphically, you might be able to make something which looks like a half-editable text box, but you shouldn't. Just put the fixed portion of the string infront of the textbox, or give them a live preview of what their text will look like. – user229044 ♦ Commented Jun 26, 2013 at 18:56
• 1 You can always fake it -> jsfiddle/ZwbWq/1 – adeneo Commented Jun 26, 2013 at 19:35

3 Answers 3

You can't do this with a stock input just manipulating attributes.

However you can simulate this with css and some extra markup:

<div class="wrapper">
    <div class="static text">static text</div>
    <input class="text" type="text" />
</div>

Position "static text" div on top of the input and add left padding to the input text.

example http://jsfiddle/MTEec/

It's impossible. Use a tag to wrap the input, and put the uneditable parts before, or after the input, and style the tag to look like an input, and style the input to match that styling.

If you need the form to send all the data, create a hidden input after your input, and update it's value with JavaScript (to the static and the input's text concatenated) upon changing the value of the main input. That way when the form is sent, the later hidden input with the same name will be used.

While it's not entirely impossible to do, it would be extremely difficult to do and it's a very bad practice to try doing something like that, at least for your use case.

You should obtain the user input without restriction inside your input box, if you want to add square brackets or the such, you can add them later using either Javascript or your service side language.

Alternatively, if you really wish to display the characters inside the textbox, you can use claustrofob's solution and mess around with the CSS.