CODEWITHSUNDEEP
javascriptjqueryhtml
redditor
redditor

Reputation: 4276

Disable editing part of input box

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 completely 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.net/7rTMK/

Upvotes: 1

Views: 7815

Answers (3)

Tam&#225;s Barta
Tam&#225;s Barta

Reputation: 1628

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.

Upvotes: 1

claustrofob
claustrofob

Reputation: 4984

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.net/MTEec/

Upvotes: 5

Dany Caissy
Dany Caissy

Reputation: 3206

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.

Upvotes: 0

Related Questions