I'm running into a strange issue on Safari while creating a custom React number input component. We have two buttons that, on click, call stepUp and stepDown on an input element. Here is an example:
<button onclick="document.getElementById('myInputId').stepDown()">-</button>
<input id="myInputId" type="number" />
<button onclick="document.getElementById('myInputId').stepUp()">+</button>
https://codesandbox.io/s/great-mccarthy-s2ybz
Using macOS Safari, when the input box is empty and stepUp/stepDown is called, I get the error
InvalidStateError: The object is in an invalid state.
This issue seems to affect (at least) Safari 14.0.1 to latest.
I am able to work around this by, on click, setting the value of the element to 0 if empty and then calling stepDown/stepUp, but I am wondering if there is something I am doing wrong here that might save me from having to implement this extra step.
Thanks in advance!
the best solution for handling this is exactly what you mentioned. Setting the value of the input to 0.
From Apple's document archive, the number input is expecting a match of \d* or [0-9]*. This was the latest documentation I could find, I hope this helps!
<button onclick="document.getElementById('myInputId').stepDown()">-</button>
<input id="myInputId" type="number" value="0" />
<button onclick="document.getElementById('myInputId').stepUp()">+</button>
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 have a textbox setup the following way:
<input type="text" name="CardNumber" id="CardNumber" maxlength="7" onkeypress="if(isNaN(this.value+String.fromCharCode(event.keyCode))) return false;" onblur="ValidateCardNumber()"/>
(note: ValidateCardNumber() is a separate function that checks the length among other things, but it isn't part of limiting the field to numerical values).
This works fine in IE. It will allow me to enter numbers but ignores a non-numerical keypress.
In Firefox, it I can't enter anything into that textbox.
Any thoughts?
I'm open to a different means to the end.
Thanks.
Debugging will show you the problem
console.log(this.value+String.fromCharCode(event.keyCode));
looking at the console you would see
So now look at what it is returning
console.log(this.value, event.keyCode);
So the key code is always returning zero.
What you need to do is use event.which for firefox
console.log(this.value+String.fromCharCode(event.which || event.keyCode));
If an input is disabled because it is a child of a disabled fieldset, IE (even 11) doesn't seem to have any way of determining that it's disabled. Is there some way to determine that without searching the tree?
Obviously, I could use jQuery to find the closest fieldset and check to see if that's disabled if it exists, but that seems hacky, not to mention potentially expensive. I could look at the currentStyle to determine if it's greyed out - but that's even more hacky. Am I missing something?
<fieldset disabled>
<input id="fieldset_child" type="text" value="Inherit Disabled" />
</fieldset>
<script>
// IE 9-11 returns zero instead of one like Firefox and Chrome do
console.log(document.querySelectorAll('#fieldset_child:disabled').length);
// this return false in all browsers
console.log(document.getElementById('fieldset_child').disabled);
</script>
example: http://jsfiddle.net/cmcnulty/ySWH2/
The "inheriting" input is not truly disabled in IE, it just appears disabled, you can still type into it. A truly foolproof method to disable the child inputs when disabling the fieldset is to apply disabled attribute to individual inputs. Then they will be truly disabled and you will be able to find them via document.querySelectorAll
OK, it turns out that Internet Explorer exposes a property called isDisabled (http://msdn.microsoft.com/en-us/library/ie/ms533902%28v=vs.85%29.aspx) which is how it tracks things that inherit their disabledness. Using that, in combination with testing the nodeName to only check the various form elements, you can determine with good performance whether something is disabled. Untested in IE6-7.
I ran into a problem the other day when building a form.
The input box has a type "number".
In Chrome the input field displays up/down arrows. I could not detect change when either the up or down buttons were clicked, so I used CSS to remove the buttons. That was pretty simple, but it did not resolve all of my problems.
I do some validation on the field (using keyup). If I enter a number in the field it works fine, but if I enter a letter into the field I cannot detect it.
Using .val() works fine in FF and IE to get the field's value (number or letter), but in Chrome, not so much.
If there is a letter in the field I cannot find a way to clear the field either. Using .val('') simply moves the cursor to the left.
As I said, this problem is specific to using Chrome. For all other browsers my code works fine.
Any suggestions on code that can be used to resolve this problem?
The issue all revolves around the input being of type "number".
The HTML5 draft defines:
The value sanitization algorithm is as follows: If the value of the element is not a valid floating point number, then set it to the empty string instead.
http://www.w3.org/TR/html5/forms.html#number-state
Trying to do a .val() to retrieve a type=number input that has a non-number in it will only return the empty string. It looks like Chrome's implementation of this is to set the value of the field to empty string before any value can actually be retrieved.
As far as resetting the field using .val('') and keyup not being recognized, this code seems to work http://jsfiddle.net/hVVSA/2/
JS
var $input = $('input').keyup(function(){
console.log("here");
});
$('#clearfield').click(function(){
console.log('val was '+$input.val());
$input.val('');
});
HTML
<input type="number" />
<button id="clearfield">clear</button>
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.