CODEWITHSUNDEEP
javascriptjqueryhtmlforms
dan_vitch
dan_vitch

Reputation: 4559

Make portions of input value read only

If the value of my input is a date

03/22/2012

and I want the numbers to be editable but not the /, can I make that portion of the input read only?

I would like to be able to accomplish this without plugins.

Upvotes: 0

Views: 139

Answers (2)

helly0d
helly0d

Reputation: 818

Yes you can verify in a onchange handler if the / is removed and you can put it back, letting the impression that only the values between the / can be edited.

A second alternative would be to use 3 fields separated by /, but this is kind of an ugly solution, but probably the most implemented.

Upvotes: 2

Jason Gennaro
Jason Gennaro

Reputation: 34855

I might do something like this, using CSS only:

div#dateInput{
    border:1px solid #999;
    width:100px;
    margin:1em;
}

div#dateInput input{
    border:0;
    width:20px;
    outline:0;
}

div#dateInput input:nth-last-child(1){
    border:0;
    width:35px;
    outline:0;
}​

HTML

<div id="dateInput">
    <input type="text" /> /
    <input type="text" /> /
    <input type="text" />
</div>​

Example: http://jsfiddle.net/Qy6BG/

Basically, I am removing the border and the outline from three input fields and "hiding" those fields in a div that I style to look like one input.

Upvotes: 3

Related Questions