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.
Related
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
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 want to target any input of text type belonging to a form of a specific name. Because the form will have numerous input fields, I don't want to target a particular input name, but rather, capture the blur (or focusout) event for any input[type="text"] occurring within the form wrap.
My present code, which doesn't work:
$( document ).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
alert($(this).val());
});
});
I answered my own question. Because the code sample is essentially correct, there is no need for multiple people to try to solve the unsolvable. The problem had something to do with where I placed the javascript code, and nothing to do with structure or syntax of the code, itself.
The way the event "change" works is what it sounds like you want. An event handler doesn't actually fire when the input is clicked or if text is keyed in, it fires when text is entered and then the input loses focus.
In the following Snippet the same selector you are using is delegated to the "change" event. You'll notice that the ['tax_form'] has 4 text inputs yet the last one is the only one working. The reason is because if an input isn't assigned a type attribute, then by default type is 'text". So when using a selector based on an input's type="text", you must keep that in mind. So if you are in full control of your HTML, make sure that each input has a type attribute with an explicit value, or use classes which is better IMO.
SNIPPET
$(document).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("change", function() {
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='notIt'>
<fieldset>
<legend>Not a Tax Form</legend>
<input>
<input type="text">
<input>
<input type="text">
</fieldset>
</form>
<br/>
<br/>
<form name='stillNotIt'>
<fieldset>
<legend>Still not a Tax Form</legend>
<input type="text">
<input>
<input type="text">
<input>
</fieldset>
</form>
<br/>
<br/>
<form name='tax_form'>
<fieldset>
<legend>Tax Form</legend>
<input class='klass' value='TEXT INPUT BY DEFAULT'>
<input value='TEXT INPUT BY DEFAULT'>
<input name='text' value='TEXT INPUT BY DEFAULT'>
<input type='number'>
<input type='text' value='THIS ONE COUNTS'>
</fieldset>
</form>
Previous commentators were right, that my code was fine as-is. I took my selector code out of a header script file, and placed it at the bottom of my footer script, and it worked as expected.
In the end, it wasn't my code that was the problem, but rather something to do with where I placed it. Possibly other javascript or jQuery code stepping on it.
Your code should work fine. Here's a working example of it to prove it's working. The tax_form fields should console.log() on blur. The another_form should not.
$(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
console.log($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Tax Form</h1>
<form name="tax_form">
<input type="text" name="first" value="first">
<input type="text" name="second" value="second">
<input type="text" name="third" value="third">
</form>
<h1>Another Form</h1>
<form name="another_form">
<input type="text" name="first2" value="first2">
<input type="text" name="second2" value="second2">
<input type="text" name="third2" value="third2">
</form>
I am trying to create a form using the jquery ui datepicker.
Everything works perfectly except that since I changed the design of the input fields the placeholder attribute is not removed when a date is picked.
Here is the fiddle: https://jsfiddle.net/deqguphb/
HTML
<form>
<ol>
<li>
<input id="input1" name="input1" value="" placeholder="Input1: Working just fine"/>
<label for="input1">Input1</label>
</li>
<li>
<input id="input2" name="input2" value="" placeholder="Input2: The placeholder stays" />
<label for="input2">Input2</label>
</li>
<li>
<input id="input3" name="input2" value="" placeholder="Input3: The placeholder stays" />
<label for="input3">Input3</label>
</li>
</ol>
</form>
Javascript
/* The focus effect */
$("input:not([value]),input[value='']").addClass('empty');
/* Input event handling */
$('input').on('input keyup', function() {
$(this).toggleClass('empty', !Boolean($(this).val()));
});
I do not know what event is fired after a date is picked. I tried with onKeyup and onChange but that did not solve the problem.
I would be beyond happy for a solution on this.
I have updated your fiddle,
I have added two events to your each of the textbox for place holder.
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Input1: Working just fine'"
Fiddle is : https://jsfiddle.net/deqguphb/4/
You need to use focus and blur event for textbox.
Hope this will help you :)
This is my fiddle. My problem is that if i write it wrong, for instance i write 9 characters (not 10 as it required) and if press the tab button from the keyboard, all of the 9 characters disappears and i have to write it again. What should I do ? how do i memorize the value ?
This is the code:
$(function() {
$("#Contact_phone").mask("9999-999-999");
});
and the HTML :
<input placeholder="telefon" name="x1" id="Contact_phone" type="text">
<input placeholder="other*" name="x2" id="other" type="text">