Menu
I'm debating between using a <select> or <datalist> to display a drop-down list from which the user can select the items.
One downside of the <select> tag is that it's inconsistent as it renders differently in different browsers: some browsers it displays with scroll bar, and for some it's a drop-down list.
The <datalist> on the other hand seems good but I just want to know if there is any way to disable the text input where the user can type whatever they want in the text box if they don't click the down arrow button on the input field as shown:
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>Is there someway to disable the input bar while keeping the dropdown list? I tried the 'readonly' attribute but that renders the whole non-clickable.
829
For extra guidance, please see WPBeginner's tutorial on adding custom code. Would you like to disable a form field to prevent any user input? A disabled, or read-only field can be useful if you’d like your users to see the field value but need to prevent that value you place there for default text from being changed by your visitors.
If a PowerShell script needs to perform critical steps, and user interaction must be prohibited, you can use API calls to temporarily disable all keyboard input. Locking keyboard input does require Administrator privileges.
In order to evaluate the user's entries into the text box and to prevent the entry of restricted characters, a key press event handler is added for each of the text box controls. The keyboard inputs submitted to the text box control are intercepted and evaluated prior to writing any information into the text box.
This method uses the character structure's "IsLetterOrDigit" method to evaluate the user's input. The last text box control restricts the user to input only special characters; this uses the same "IsLetterOrDigit" call as shown in the previous example, however, instead of looking for a negative match, it looks for a positive match.
You could use the pattern attribute on the input element to restrict the allowed values:
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser"
pattern="Internet Explorer|Firefox|Chrome|Opera|Safari"
title='Must be "Internet Explorer", "Firefox", "Chrome", "Opera", or "Safari"'>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
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
