Is it possible to open up the mobile numeric keyboard in a textarea box?
The typical pattern="[0-9]*" does not seem to work with a textarea and I can't find any other information on this anywhere else. I am trying to get this working in an angular app, so is there some way to preventDefault() on the default keyboard and somehow trigger the numeric keyboard?
e.g.
<textarea id="searchBox" pattern="[0-9]*" ng-model="searchParams.searchString" rows="3" ng-blur="formatSearch()"></textarea>
Unfortunately this is not yet possible for textarea. I have searched exhaustively on this and tried many varietions of pattern and types and so on but it just is not supported for textarea.
There are two possible solutions, either you can create your own html5 custom soft keyboard and apply a trick not to open the default keyboard.
Or (more elegant I think) use a normal input with type number or type tel and attach an onkeyup listerer. When enter is pressed, you process the line into your textarea and clean plus refocus the input.
isn't possible use input?
like
<input name="numbers" type="tel">
and than style the input like a textarea.
i dont have any idea for the textarea.
You can use the global attribute inputmode in textarea to alter Android or iPhone keypad.
<textarea inputmode="numeric"></textarea>
MDN Web Docs:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
A textarea can be validated via php but not in html. Below is my way of validating textarea,
$value=$_POST['value from textarea']
if(preg_match("/^[A-Za-z0-9]+$/", $value != 1) {
echo"oops";
} else {
echo "success";
}
Related
i am using ReactJS and ReduxJS to construct my application .
I created my form using Redux-Form and there are many text input and for one of them ,i am using onkeyDown event to increase and decrease number in my text
so when i click up arrow or enter first digit the text is auto
completed with previous date entered(history) that disturb when i
click another up arrow
[Hint] I tried AutoComplete=off and did not work
You just have the attribute cased incorrectly. You can use the following 3 attributes on the input:
autoComplete="off"
autoCorrect="off"
spellCheck="off"
Notice that each are camel case.
Seems like autoComplete="off" no longer works in Chrome. A workaround is to either set autoComplete="new-password" or a value not supported: autoComplete="something-unsupported".
i have tried all of the above example but this one is worked for me autoComplete="off"
I'm trying to create a HTML duration(not time of day) input field, ie HH:MM, and I would like it to trigger the numeric keyboard on mobile devices.
<input type="number" /> appears to be the only reliable way to make this happen. But I require it to accept colons :.
Is there a way to force the number input field accept additional special characters?
As far as I know, it's not possible. As you need the numeric keyboard on mobile device along with : is not native at all. There is just no : key in the keyboard, nothing you can do about it.
Just use <input type=time>
and you can make magic happen nicely on mobile device. If you need the user to type in, use number or text, and add additional pattern property to perform the validation. Or use something like jQuery validation plugin
to perform just in time validation.
Try for HH:MM entry and H:MM entry
<EditText>
android:digits="1234567890:"
android:inputType="textNosuggestions"
android:minLength="4"
android:maxLength="5"/>
If you want to prevent users from entering time like "91:87", or ":36" or ":3:4" and all such variations then you would have to use a TextWatcher like this edistext.addTextChangedListener(new TextWatcher(this));
I'm devlopping a web app using Phonegap and HTML5.
When focusing on a text input, I've been asked to open the 'alpha-numeric' keyboard with the 'numeric' keys displayed.
Is that even possible?
Telephone: <input type="tel" name="usrtel">
This opens up a alphanummeric keyboard. This could be any number you want, not only a telephone number :-)
The type "tel" is new and comes from html5. A overview about all input types can be find here: W3Schools
Edit from Mon. 1st of Sept. 2014, 4:30pm:
I'm editing my answer because of the answer Jonas Grumann has given. You should use the <input type="tel" just for numbers only. Like the type described: telephonenumbers for example. This input type will not recognize it, if the user enters decimal numbers.
If you want the user to enter decimalnumbers you have to do it with the here given answer "pattern" you should use them then like this:
HTML
<input type="text">
and JS (Please consider: These are commands for which you need jQuery/jQuery-mobile
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});
And for the sake of completeness i'm going to quote the user that has given this answer here -> Force iOS numeric keyboard with custom currency pattern
The idea is simple. The input starts off and ends up with type="text",
but it briefly becomes type="number" on the touchstart event. This
causes the correct iOS keyboard to appear. As soon as the user begins
to enter any input or leave the field, the input becomes type="text"
once again, thus circumventing the validation.
There's one downside to this method. When the user returns to an input
that has already been filled out, the input will be lost (if it
doesn't validate). This means the user won't be able to go back and
edit previous fields. In my case, this isn't all that bad because the
user may want to use the calculator over and over again with different
values, so automatically deleting the input will save them a few
steps. However, this may not be ideal in all cases.
It looks like Mobile Safari supports the new HTML5 input type
attributes of email, number, search, tel, and url. These will switch
the keyboard that is displayed. See the type attribute.
If there are more questions, let me know and i'm going to edit again.
I am working in Javascript. I am trying to make a function on the keypress event. I want to make function for validation on mobile number. I want to allow only digits in it. I also want to allow ctrl+v and ctrl+a in this but I dont want to allow V and A as characters.
I have seen many answers here but no one is purely same.
If you only care that digits are entered, as it seems from your question, this Jquery code will work.
It uses on keyup() and thus it will work on ctrl+v as well. It won't work if someone uses right-click to paste, and for that reason, you can just disable right clicking on that field.
It works by stripping off the last character of the input value if it is not a number. So if a user enters 25s or 25ss, it will get stripped down to 25.
Live Demo
The Jquery
$(document).ready(function(){
$('#number').keyup(function(){
var input = this.value;
while (isNaN(input))
{
input = input.substring(0,input.length-1);
$('#number').val(input);
}
});
//disable right click on the field
$('#number').bind("contextmenu",function(e){
return false;
});
});
You can use HTML5 input tags which use the pattern attribute.
<form>
<input name="name" value="" pattern="\d+" required/>
<input type="submit"/>
</form>
I have a input text box disabled:
<input type="text" name="name" disabled="disabled" />
In IE and in Chrome you can copy and paste the value populated in that input field but in Firefox you cannot.
Firefox does not allow clipboard manipulation through JavaScript for valid security concerns.
Any suggestion? Is there a work around this?
readonly="readonly" will do the job
it should be supported by the major browsers
I don't like using readonly="readonly", ever. It leaves the field focusable and reachable via tab keypress and, if, god forbid, the user hits the backspace key while the read-only field is focused, then most browsers treat it like the user hit the 'back' button and bring up the previously viewed page. Not what you want to see happen when you're filling out a large form, especially if you are using some archaic browser that doesn't preserve the form data when you hit the 'next' button to return to it. Also very, very bad when using some single-page web application, where 'back' takes you to a whole other world, and 'next' doesn't even restore your form, much less its data.
I've worked around this by rendering DIVs instead of input fields when I need the field disabled (or PRE instead of a textarea). Not always easy to do dynamically but I've managed to make fairly short work of it with AngularJS templates.
If you have time, head over to the Mozilla Bugzilla and ask them to fix it.
tl;dr: Support for selecting and copying text in a disabled field is unreliable; use the readonly attribute or a non-input element, such as a <span> instead, if this functionality is necessary. Use JavaScript to modify the behavior of the readonly input to prevent unwanted behavior such as going back a page when someone hits the backspace key while the readonly input has focus.
*UPDATE: 2018.12.24
The spec has changed since this answer was originally posted (thanks to Wrightboy for pointing this out); it now includes the following caveat with regards to disabled fields:
Any other behavior related to user interaction with disabled controls, such as whether text can be selected or copied, is not defined in this standard.
— https://html.spec.whatwg.org/multipage/input.html#the-readonly-attribute
Disabled fields still cannot receive focus nor click events.
Because the standard does not define whether or not text within disabled controls can be selected or copied and because at least one major browser doesn't support that functionality, it's probably best to avoid relying on that behavior.
Original Answer
This is the expected behavior for a disabled field (as of the original date of this answer). IE and Chrome are being generous, but Firefox is behaving appropriately.
If you want to prevent the user from changing the value of the field, but you still want them to be able to read it, and/or copy it's value, then you should use the readonly attribute. This will allow them to set focus to the element (necessary for copying), and also access the field via the tab button.
If you are concerned about a user accidentally hitting the backspace button inside the readonly field and causing the browser to navigate back a page, you can use the following code to prevent that behavior:
document.addEventListener("DOMContentLoaded", function() {
var inputs = document.querySelectorAll('[readonly]');
for(var i=0; i < inputs.length; i++){
inputs[i].addEventListener('keydown', function(e){
var key = e.which || e.keyCode || 0;
if(key === 8){
e.preventDefault();
}
})
}
});
<input value="Hello World" readonly=readonly />
As quick answer, one can have another not disabled element to enable + copy/paste + redisable your input text, like this:
$('#btnCopy').click(function(){
$('#txtInputDisabled').removeAttr('disabled');
$('#txtInputDisabled').select();
document.execCommand("copy");
$('#txtInputDisabled').attr('disabled','disabled');
});
You can se my complete response to this post
Refer to my post to the same question. It does the following:
Makes the textbox just like readonly without using the readonly attribute on the input tag, but will honor tab index and set focus
Supports all clipboard functions win and mac with mouse or keyboard
Allows undo, redo and select all
Restrict HTML input to only allow paste
You can accomplish this in share point by utilizing the contenteditable attribute as follows with jquery.
$("#fieldID").attr("contenteditable", "false");
This will allow the user to highlight the text and copy it but will not allow them to enter anything in the field.