I tried to create an date type input field that would not take key value from keyboard. I used
<input type="date" (keypress)="false"/>
This keypress event working on Chrome browser
but not working on Mozilla Firefox.
I tried to create an date type input field that would not take key value. I used
<input type="date" (keypress)="false"/>
This is working on Chrome browser
but ** keypress event not working on Mozilla Firefox**.
function myFunction() {
alert("You pressed a key inside the input field");
}
<input type="text" onkeypress="myFunction()">
Related
So I have look at most related link on my problem and can't seems to make it work.
Tried the workaround on this link jquery focus back to the same input field on error not working on all browsers but it didn't work for me.
I have a javascript that evaluate the value of an input field on exit (blur). That works well. The problem is when the value is wrong, I show an alert, delete the content of the field and set the focus back on the faulty field.
There comes the problem. In Firefox, the focus will still go on the other field which I clicked on (triggering the blur() of the previous field).
In IE(11.0.9600) or Chrome(64.0), the alert shows but keeps coming back in some sort of infinite loop. I have to kill the browser.
So here is a VERY truncated version of my HTML:
<!DOCTYPE html>
<html class="OUTPUT WEB CHANNEL_WEB simplex" section="ChargesLinesList" dpi="96" scale="1.0">
<input id="dateBilled" class="myDateField" name="dateBilled" value="2018-01-18" type="text">
<input id="dateBilled" class="myDateField" name="dateBilled" type="text">
<input id="dateBilled" class="myDateField" name="dateBilled" type="text">
and this is my code to validate the value and show the alert:
$(".myDateField").on("blur", function(event){
var myDateFormat = /^(((((1[26]|2[048])00)|[12]\d([2468][048]|[13579][26]|0[48]))-((((0[13578]|1[02])-(0[1-9]|[12]\d|3[01]))|((0[469]|11)-(0[1-9]|[12]\d|30)))|(02-(0[1-9]|[12]\d))))|((([12]\d([02468][1235679]|[13579][01345789]))|((1[1345789]|2[1235679])00))-((((0[13578]|1[02])-(0[1-9]|[12]\d|3[01]))|((0[469]|11)-(0[1-9]|[12]\d|30)))|(02-(0[1-9]|1\d|2[0-8])))))$/;
if(!myDateFormat.test($(this).val())){
alert('Invalid date or format. Make sure you the format his YYYY-MM-DD and the date is valid');
$(this).val("");
$(this).focus();
}
})
The blur event triggers whenever a field loses the focus, but in your case, when someone leaves a field and clicks into another one, blur will fire for the first field, and if that field fails your validation, the focus will switch back to it, causing the other field that the user clicked into to lose the focus and then blur will fire for that field and so on.
Instead, you should be using the change event, which triggers when the focus is lost, but only if the value of the field has changed since it got the focus. This will avoid an infinite loop and .focus() will then work properly.
Also, you can't have multiple elements with the same id and each text box should also have a unique name.
Lastly, your <html> tag is full of attributes that are not valid for HTML. Most of what you are doing there should be accomplished via media queries.
$(".myDateField").on("change", function(event){
var myDateFormat = /^(((((1[26]|2[048])00)|[12]\d([2468][048]|[13579][26]|0[48]))-((((0[13578]|1[02])-(0[1-9]|[12]\d|3[01]))|((0[469]|11)-(0[1-9]|[12]\d|30)))|(02-(0[1-9]|[12]\d))))|((([12]\d([02468][1235679]|[13579][01345789]))|((1[1345789]|2[1235679])00))-((((0[13578]|1[02])-(0[1-9]|[12]\d|3[01]))|((0[469]|11)-(0[1-9]|[12]\d|30)))|(02-(0[1-9]|1\d|2[0-8])))))$/;
if(!myDateFormat.test($(this).val())){
alert('Invalid date or format. Make sure you the format his YYYY-MM-DD and the date is valid');
$(this).val("");
$(this).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dateBilled1" class="myDateField" name="dateBilled1" value="2018-01-18" type="text">
<input id="dateBilled2" class="myDateField" name="dateBilled2" type="text">
<input id="dateBilled3" class="myDateField" name="dateBilled3" type="text">
I have this input type="number" field on my application:
<input type="number" id="quantidade" class="form-control">
So I have this jQuery code to execute some stuff at the event keyup:
$("#quantidade").keyup(function(event){
//code that's working like a charm
});
That's working well when the user enter some value on the field. But, in browsers like Chrome and Firefox, type number fields have two little arrows aside the field to increase or decrease the value:
Clicking on these arrows does not active the keyup event. So, how can I activate the same code when the user click on the arrows? Which kind of event I can use for that?
Try that one :
$("#quantidade").on("keyup keydown change",function(event){
//code that's working like a charm
});
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";
}
I am working on a solution that implements adding text to textboxes but I disable the normal key events and use a custom one. I disable the key event like this:
<input onkeypress="return false;" onkeydown="return false;" onkeyup="return false;" type="text">
Now this works fine on browsers(Safari, Firefox, IE) but it fails to do so on the IPad's Safari and when a user press a key, it is entered twice. Is there another way to disable key events on the input field for the ipad?
Maybe you can make the textbox completely transparent (alpha:0), place it inside a div, and add the text to the div behind the textbox.
I figured it out. Basically if you are going to customize key entry, you have to customize it on the key up and not the key down or key pressed in Javascript.
We are currently using jQuery to trigger a recalculation on a form input field. Using HTML5 we get nice spinboxes in Safari (at least on 5.0.3 Mac). However updating the field with the spinbox controls doesn't seem to trigger a change event at all. It's like the field hasn't been updated. Is this just an oversight in WebKit? Or are there ways around this?
Edit: Changing the spinbox doesn't even trigger an input event.
You want to use the oninput event. Use something like $("...").bind("input", fn);.
See http://msdn.microsoft.com/en-us/library/gg592978(VS.85).aspx
$.click() works fine. If you click and hold, it doesn't until you release.
change event is triggered when input lost focus and the value is changed, by clicking the spinbox, input does not lost its focus, so change event will not fired.
This works for me in Chrome 11 and Opera 11.10:
<fieldset class="col" oninput="exoutput.value = exnumber.valueAsNumber * exnumber.valueAsNumber;">
<legend>Output event handler</legend>
<label for="exnumber">Number: </label>
<input type="number" id="exnumber" placeholder="Enter a number" min="0" value="4" required>
<label for="exoutput">Output: </label>
<output for="exnumber" id="exoutput">16</output>
</fieldset>
Firefox 4 doesn't do valueAsNumber, but a minor change makes it work in all three. Sorry I don't have Safari available to test on right now.