I have the following form element
< input type="number" name="abc" id="abc" value="10" min="10" onclick="runFunction()" onchange="runFunction()" >
When I click on the up/down arrows at the end of the number field, the function runs. I also want the function to run when the user types in a number, but the function runs only if I click outside the field after typing.
Is there a way to set an event that runs as the user types in the numbers?
Yes, you can add the 'oninput' event to your HTML input tag.
<input type="number" name="abc" id="abc" value="10" min="10" onclick="runFunction()" onchange="runFunction()" oninput="runFunction()">
Note: You may want to remove the other events, otherwise you will have simultaneous events being triggered.
<input type="number" name="abc" id="abc" value="10" min="10" oninput="runFunction()">
More info about 'oninput' here: https://www.w3schools.com/jsref/event_oninput.asp
Related
I have a simple number input element:
<input type="number" id="test" min="0" max="100" value="50">
Earlier I could change the value of the element just by scrolling inside the input element. But I could not do that anymore with Chrome version 100. Is this some kind of bug in Chrome or has something changed in the recent version of Chrome?
Also, I noticed if I add a blank event listener to that element then it works properly in Chrome:
document.getElementById('test').addEventListener('wheel', () => { })
<input type="number" id="test" min="0" max="100" value="50">
When I press down 'tab', focused element is changed on browser.
I want to control the order of focused element or skip some elements when tabbing.
I know I can use preventDefault(https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) to ignore default logic to fire my logic. But I just want to solve it by tweaking default order little bit.
But I can't find any documentation about rules about it.
Where can I check default actions on browser triggered by keyboard events like keydown 'tab'?
You are looking for either the tab-index HTML attribute as demonstrated below (try moving with the tab button), or the tabIndex JavaScript property.
These are related to which elements can receive the focus; browsers tend to allow this by default for any elements the user is expected to interact with (like button, textarea, etc.)
<label>First</label>
<input type="text" tabindex="1"/>
</br>
<label>Third</label>
<input type="text" tabindex="3"/>
</br>
<label>Fifth</label>
<input type="text" tabindex="5"/>
</br>
<label>Second</label>
<input type="text" tabindex="2"/>
</br>
<label>Fourth</label>
<input type="text" tabindex="4"/>
I have four fields, two of them is a text input field and the other is a radio button. The thing is I want the text field to be enabled only if select corresponding radio button.
I tried with onclick and oncheck functions inside radio tag but its working for enable the textbox but disable not working
<html>
<body>
<input type="radio" name="type" value="customurl" onclick="document.getElementById('text').removeAttribute('disabled')">
<input type="text" id="text" name="custom1" placeholder="should be 5 charecters at least" disabled>
<input type="radio" name="type" value="customurl" onclick="document.getElementById('sel').removeAttribute('disabled')">
<input type="text" id="sel" name="custom2" placeholder="should be 5 charecters at least" disabled>
</body>
</html>
if I select radio1 textbox1 is enabled and when select radio selected textbox2 enabled but textbox1 not disabled
In addition to removing the disabled attribute on the target element, you're looking to also set the disabled attribute on the other element. This can be done with .setAttribute('disabled', true).
You'll also want to remove your onclick event handler, and make use of unobtrusive JavaScript by adding an event listener. I've used .getElementsByTagName() to target the relevant inputs.
This can be seen in the following:
document.getElementsByTagName('input')[0].addEventListener('click', function() {
document.getElementById('text').removeAttribute('disabled');
document.getElementById('sel').setAttribute('disabled', true);
});
document.getElementsByTagName('input')[2].addEventListener('click', function() {
document.getElementById('sel').removeAttribute('disabled');
document.getElementById('text').setAttribute('disabled', true);
});
<input type="radio" name="type" value="customurl">
<input type="text" id="text" name="custom1" placeholder="should be 5 charecters at least" disabled>
<input type="radio" name="type" value="customurl">
<input type="text" id="sel" name="custom2" placeholder="should be 5 charecters at least" disabled>
html5 quantity input field is defined in html below.
Pressing submit button in Chrome shows error
value must be less or equal to 1484
How to fix this so that message is
Selected quantity is more than stock status
I tried to use setCustomValidity() as show in code below but browser standard validation message
value must be less or equal to 1484
still appears instead of custom validation message.
<form>
<input class="amount" name="quantity" type="number"
value="1" size="4" min="0" step="1" max="1484"
oninvalid="this.setCustomValidity('Selected quantity is more than stock status')"
oninput="setCustomValidity('')">
<input type="submit" value="Add to cart"/>
</form>
Bootstrap 3 and jquery-ui are used
You really should not use inline HTML event handling attributes as they:
create spaghetti code that is hard to read and leads to duplicated
code
create global wrapper functions that alter the this binding in the
callback
don't follow the W3C DOM Event standard
Also, by doing this in pure JavaScript, you give yourself more options for handling the errors. Here, we've got different error messages for too low of a value vs. too high of a value.
The following snippet may not work in the Stack Overflow snippet environment, but you can see it working here.
// Get DOM reference
var input = document.getElementById("num");
// Add event listener
input.addEventListener("input", function(e){
// Clear any old status
this.setCustomValidity("");
// Check for invalid state(s)
if(this.validity.rangeOverflow){
this.setCustomValidity("Selected quantity is more than stock status");
} else if(this.validity.rangeUnderflow){
this.setCustomValidity("Selected quantity is less than stock status");
}
});
<form>
<input type="number" id="num" name="quantity" class="amount"
value="1" size="4" min="0" step="1" max="1484">
<input type="submit" value="Add to cart">
</form>
Try This:
<form target="_blank">
<input class="amount" name="quantity" type="number"
value="1" size="4" min="0" step="1" max="1484"
oninvalid="this.setCustomValidity('Selected quantity is more than stock status')"
oninput="setCustomValidity()">
<input type="submit" value="Add to cart"/>
</form>
The problem I'm having is with Safari and Chrome. It appears there is a bug that causes the mouseup event to fire twice when you click on a text or input box. I want the text in the input box to be completely selected when the box gets the focus (regardless if it's tabbed into, clicked on, or given the focus through code). If you tab to the box or give it the focus through code it works perfectly. However, if you click on the box, the text is selected until you let go of the mouse button. Then the text is immediately deselected. Here is the code I am using:
<h1>Slope Intercept Form</h1>
<form>
<p>Enter the beginning X and Y coordinates for your line.</p>
<label for="x1">X1: </label>
<input id="x1" type="text" name="x1" maxlength="6" size="5"
onfocus="this.setSelectionRange(0,this.value.length)"
onblur="message(this.name, this.value)">
<label for="y1">Y1: </label>
<input id="y1" type="text" name="y1" maxlength="6" size="5"
onfocus="this.setSelectionRange(0,this.value.length)"
onblur="message(this.name, this.value)">
</form>
Is there any way around this for Chrome and Safari?
This should do it:
<input type="text" id="myText" value="Mickey" onclick="myFunction()">
<script>
function myFunction() {
document.getElementById("myText").select();
}
</script>
Here's a working demo using your code. Notice there needs to be 2 different functions and two different getElementByID parameters: http://codepen.io/anon/pen/pJXLro
HTML:
<h1>Slope Intercept Form</h1>
<form>
<p>Enter the beginning X and Y coordinates for your line.</p>
<label for="x1">X1: </label>
<input id="x1" type="text" name="x1" maxlength="6" size="5" onclick="myFunction()">
<label for="y1">Y1: </label>
<input id="y1" type="text" name="y1" maxlength="6" size="5" onclick="myFunction2()">
</form>
Javascript:
<script>
function myFunction() {
document.getElementById("x1").select();
}
function myFunction2() {
document.getElementById("y1").select();
}
</script>
As you may already know, it's a good idea to try to keep your HTML and JS as separated out from each other as possible (but that wasn't causing you the problem in your example).
I found a solution. I created event listeners for the input boxes:
document.getElementById("x1").addEventListener("click", function() {document.getElementById("x1").select();});
document.getElementById("y1").addEventListener("click", function() {document.getElementById("y1").select();});
Now, when the input box is clicked, it is automatically selected. When the input box is tabbed into it is also automatically selected. Now I don't have to use the onFocus event to select the input box text. The onFocus event and onClick event were conflicting with each other in Safari and Chrome but not on Firefox, IE or Opera.