Menu
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>
893
The readonly attribute makes a form control non-editable (or “read only”). A read-only field can't be modified, but, unlike disabled , you can tab into it, highlight it, and copy its contents.
The second way of making the input text non-editable is using the CSS pointer-events property set to "none", which will stop the pointer-events.
Set the TextBox control's ReadOnly property to true . With the property set to true , users can still scroll and highlight text in a text box without allowing changes.
To give a limit to the input field, use the min and max attributes, which is to specify a maximum and minimum value for an input field respectively. To limit the number of characters, use the maxlength attribute.
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.
146
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
