Make only part of an input field non editable

Question

I have done a bit of hunting on the web, and have yet to find any concrete answer to this. Is it possible to have a text field, with default text in it that is non editable?

For example, say I need a user to input a phone number. What they see is:

Input Phone Number: ***-***-****

They can edit any of the stars they want. However, even if the field were completely empty, there should be no way that the dashes could be removed. I've seen the readonly and disabled tags for the input area, but those render the entire field disabled.

I want the user to be able to input information, without changing the characters I've set default into the input field.

Here's some dummy code if you need it to experiment with:

<!doctype HTML>
<html>
<body>
    <section>
         <article>
             <label>Phone Number Entry: </label>
             <input type="tel" name="phone" placeholder="123-456-7890" 
                                        onkeypress='eval(event)' required/>
          </article>
     </section>
</body>
</html>

Phone numbers should be read permissively, allowing separators like “-” and “ ” but not requiring. This creates challenges to processing the data, but it does not create the problem described in the question. It’s not a good idea to try to enforce a rigid format on user input, especially if the format does not correspond to the international ITU-T recommendation (which uses spaces, not hyphens, as the recommended separators). — Jukka K. Korpela, Jul 24 '13 at 20:39

score 3 · Answer 1 · answered Jul 24 '13 at 19:41

You could create a fake input similar to the following:

<style>
    .fakeInput{
        background-color:#FFFFFF;
        border:1px solid #CCCCCC;
        border-radius:5px;
        padding:3px;
        width:300px;
    }

    .fakeInput span{
        margin-left:10px;
    }
</style>
<p class="fakeInput">Input Phone Number:<span contentEditable="true" onfocus="this.innerHTML=''">123-456-7890</span></p>

and then on click on some element, read the value from the DOM.

score 1 · Answer 2 · answered Jul 24 '13 at 19:25

Just a suggestion, but you could use 3 separate text inputs for the editable areas and some CSS to make them appear as a single input. And then maybe a hidden input to hold the complete value, it necessary.

The alternative would be a (likely messy) JavaScript solution where you have to track key-strokes and cursor position.

score 0 · Answer 3 · answered Jul 24 '13 at 18:53

0

Inputs do not support disabling partial areas. You'll have to use onkeyup and some JavaScript code to inspect the input box and replace the contents if changed.

answered Jul 24 '13 at 18:53

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Answer 4 · answered Jul 24 '13 at 19:34

It is not possible with pure HTML/CSS. You will need some Javascript for this. There are some good JS plugins out there that support this functionality. I usually work with meiomask or inputmask. You will have the added functionality of limiting your users to inputting numbers only (or whatever you desire)

They both rely on jQuery, but you could off course write your own solution in javascript if you are up to it.

The suggested way of using 3 different inputs, and style them as one big input is not the best solution IMO. Users will have to switch fields (by mouse or tab) which will be confusing cause it looks like a single field. Horrible UX! You could add some JS to switch fields automatically, but if you are gonna use JS I would go for an input mask. And I am not yet talking about the extra work to process 3 fields at the server side...

Make only part of an input field non editable

4 Answers4