I have an input text box on which there are handlers for events like focusOut, input
Now, I expect the "input" event to be trigerred/handled first and then the "focusOut" (as I use the entered value in focusOut)
The above sequence works consistently on Chrome, FF. However, in IE11, the sequence is a bit unpredictable i.e. in certain cases, the focusOut triggers first and then the input
From what I observed, this is mostly when I enter the value in that field and directly click on the Submit btn on my form using my mouse.
Is that a known IE11 issue ?
Looks like you are saying that onfocusout is executing first then oninput event.
I try to test this sample code with IE browser and it looks fine.
<!doctype html>
<html>
<head>
</head>
<body>
<input type="text" id="input" onfocusout="alert(this.value)"> oninput: <span id="result"></span><br>
<input type="submit" value="submit">
<script>
input.oninput = function() {
result.innerHTML = input.value;
};
</script>
</body>
</html>
Output:
Let me know if I am missing anything. I will try to correct myself.
Related
Actually I'm trying to set focus on text-box when focus is lost.The reason behind this is that there is requirement to forcefully set focus on text-box if some validation fails(like empty field validation) and validation is perform on blur event of that text box.
I have tried it on fiddle also but it seems like focus is there but cursor is not blinking.
Please refer link : http://jsfiddle.net/zHeJY/
Please let me know the reason behind this and solution for same.
Thanks in advance.
First: This is a bad idea to trap user inside an input unless validation passes! Users should be allowed to focus whatever they want. Ideally, you can prevent a form submission if validation fails.
Problem: (1) You don't have any other element in the fiddle you provided. (2) You are not validating anything, just doing an endless loop for blur-focus cycle!
Solution:
See this fiddle: http://jsfiddle.net/zHeJY/7/
With a proper validation routine in place (and another element available), it will work.
HTML:
<input id="setFocus"/>
<input id="other" />
JS:
$("#setFocus").on("blur", function(e) {
if (! validate(this)) {
$(this).focus();
}
});
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$( document ).ready(function() {
$(document).on('blur', "#setFocus", function (e) {
$(this).focus();
});
});
</script>
</head>
<body>
<input type="text" id="setFocus"/>
<input type="text" id="set"/>
</body>
</html>
try this
HTML
<div id="something">
<input type="text" id="setFocus"/>
<input type="text" id="setFocus1"/>
</div>
JS
$("#something").mouseup("blur",function(){
$(this).children(":first").focus();
})
you should have parent element for this on click of any where you will get the required result
I have a structure of the following format , which I display in a Bootstrap modal.
<div>
<input type="text"/>
<input type="text"/>
<button class="jSomeButton" onclick="javascript: return false;"></button>
<!--Click event handled in Javascript code-->
</div>
$(function(){
$(".jSomeButton").on('click',function(){
//Called from Firefox, Chrome and IE
//Not called from Safari
});
});
In Firefox, Chrome and IE when I press Enter/Return key after filling the inputs, the button click is triggered.
But in Safari [v4.0.3] , it doesn't trigger the button click! Rather it seems to postback to the same page.
Is this a known issue in Safari?
If yes, any workaround?
If no, could someone please help me with figuring out the root problem?
P.S. :
1. I'm familiar with the Javascript code for triggering button click on Enter keypress event. Just curious as to why the above won't work only in Safari.
2.Just for clarification, pressing Enter key while I'm still on the input control and not by pressing tab to first focus on the button and then press Enter.
Add the input fields and buttons to a form.
try using this but i m not sure about this is the right way to do it.
in that case you better add two js listener functions to the input fields. as
`
<div>
<input id="one" type="text"/>
<input id="two" type="text"/>
<button class="jSomeButton" onclick="javascript: return false;"> </button>
<!--Click event handled in Javascript code-->
</div>
$('#one').keypress(function(e){
if(e.which == 13) {
//call your code
}
});
$('#two').keypress(function(e){
if(e.which == 13) {
///call your code
}
});
better you write three listeners one for button other two for two input files. hope this ill help you. i am not sure about this solution. please let me know after trying it.
Instead of class attribute use id attribute onclick event ,
<div>
<input type="text"/>
<input type="text"/>
<button class="jSomeButton" id="jSomeButton" onclick="javascript: return false;"></button>
<!--Click event handled in Javascript code-->
</div>
$(function(){
$("#jSomeButton").on('click',function(){
//Called from Firefox, Chrome and IE
//Not called from Safari
});
});
if you do not want to add ID you can delegate event to the document so event will work on DOM which has defined class.
Example
<script type="text/javascript">
$(function(){
$(document).on('click', ".jSomeButton" ,function(){
alert('works');
});
});
</script>
#Vandesh,
As posted in comments, I suggest you put up a form tag around your entire form.
Have a look at this JSFiddle for more idea.
http://jsfiddle.net/JUryD/
I tried this on Safari, Chrome, IE6+, Opera and Firefox 22+
Let me know if you face any other troubles.
Here is the code:
<div>
<form>
<input type="text"/>
<input type="text"/>
<button class="jSomeButton" onclick="javascript: return false;">Send</button>
</form>
</div>
For me Javascript focus() method is working fine if I use it with a button and onClick event, but with onBlur from a text box, it is not working. Can anyone guide me on this?
<html>
<head>
<script type="text/javascript">
function displayResult()
{
var inp1=document.getElementById("text1").value;
var inp2=inp1.length;
if(inp2==0)
{
alert("Field 1 cannot be left Empty");
//document.getElementById("text1").value="";
document.getElementById("text1").focus();
}
}
</script>
</head>
<body>
<input type="text" name="text1" id="text1" onBlur="displayResult();"/>
<input type="text" name="yext2" id="text2" />
</body>
</html>
It's not possible to reapply focus to an element when its blur event triggers. Use a timer with an interval value of 0 to delay the call to focus until afterwards:
function displayResult() {
var inp1 = document.getElementById("text1").value,
inp2 = inp1.length;
if(inp2==0) {
alert("Field 1 cannot be left Empty");
//document.getElementById("text1").value="";
window.setTimeout(function () {
document.getElementById("text1").focus();
}, 0);
}
}
You need to set little delay in the focusing of the field.
setTimeout(function(){field.focus()}, 10);
like :
<html>
<head>
<script type="text/javascript">
function displayResult(obj)
{
var inp1=obj.value;
var inp2=inp1.length;
if(inp2==0)
{
alert("Field 1 cannot be left Empty");
setTimeout(function(){obj.focus()}, 10);
}
}
</script>
</head>
<body>
<form>
<input type="text" name="text1" id="text1" onblur="displayResult(this);"/>
<input type="text" name="yext2" id="text2" />
<input type="submit">
</form>
</body>
</html>
I advise you not to use onblur in validating inputs if you are display notification message as alerts. It's quite annoying , it produces endless alerts .
Validate form onsubmit event.
Since the time you posted the question, I experimented your issue for an hour using different techniques. It now seems to me that through an event on an input, you cannot set focus on itself.
Still, There is another possible workaround. You can call displayResult() when the form is submitted, check if text1 is empty and cancel submit if it is empty and set focus on text1. I have rewritten the code for you.
<html>
<head>
<script type="text/javascript">
function displayResult()
{
var inp1=document.getElementById("text1").value;
var inp2=inp1.length;
if(inp2==0)
{
alert("Field 1 cannot be left Empty");
document.getElementById("text1").focus();
return false;
}
}
</script>
</head>
<body>
<form onsubmit="return displayResult();">
<input type="text" name="text1" id="text1" />
<input type="text" name="yext2" id="text2" />
<input type="submit" />
</form>
</body>
</html>
Hope that helps...
Peace be upon you ...
There's no problem in calling focus() on blur event on the same element, if user tries to focus on any other element that does try to refocus itself on blur event (e.g. a button).
But, if there are more than one input elements of type text, password, number, etc., and all of them try to return focus to themselves on blur event, that causes a blur-focus loop between 2 or more elements.
Let us observe a simple example with 2 input elements of type text:
User fills-in the first input, but it is not valid (e.g. username does not contain at least 6 characters), then moves focus to the second input (presses tab key or clicks on the second input field);
Blur event triggers on the first input element and calls validation function, which tries to return the focus to the first input element, but that causes...
Blur event to trigger on the second input element and calls validation function which tries to return focus to the second input element, which further causes blur on the first input element...
This sequence of events may cause different behavior in different browsers, especially if there's also an alert dialog for each invalid input, but the result is obviously an infinite loop of blur and focus events on at least two input elements, even if calling focus() is delayed.
Thus, the easiest solution is to avoid refocusing itself on blur event.
I've got a strange bug, well, MSIE does.
Seems it is failing on all major MSIE versions: 6, 7, 8 and 9 (!)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" ><head><title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var test=jQuery('#in');
test.focus(function(){
if(test.val()=='empty')test.val('');
test.attr('readonly',false);
});
test.blur(function(){
if(test.val()=='')test.val('empty');
test.attr('readonly',true);
});
});
</script>
</head><body>
<input type="text" value="empty" readonly="readonly" id="in"/>
</body></html>
Let me explain how this system works and what is going wrong.
When the user clicks (focuses) the input box, the input box should be made editable (ie, lose readonly flag). Then, when s/he leaves the input box (ie, blur event) some processing is done (not shown in code) and the input box is made readonly.
This works like a charm in most browsers (firefox, opera, webkit-based), but not any version of IE (including 9 beta).
The problem is that in IE, the user has to click the input box twice.
At this point, you might ask is the inputbox left readonly the first time?
No. I tested it, javascript reports that it is editable.
Easy fix, just fire a click event on the input box (to simulate the user's double click behavior), no?
No, .click() and .focus() both failed. No idea why.
Edit: Know that the cursor does show up in the text box, at least visibly.
Important: People, please do at least try the code before answering!
I wouldn't say it's a bug.
If you change the value, you also remove the current textRange.
Try test.select() , it should give the cursor back to the input.
test.focus()
will result in a loop that will end in an "not enough memory"-error.
I believe that readonly should be readOnly. Seems weird you would toggle this property. You can also try to remove it
jQuery("#foo").removeAttr("readOnly"); //.removeAttr("readonly");
try this ive just tried that and it works:
<input type="text" value="empty" id="in" readonly/>
I would like the value of the input text box to be highlighted when it gains focus, either by clicking it or tabbing to it.
<html>
<body>
<script>
function focusTest(el)
{
el.select();
}
</script>
<input type="text" value="one" OnFocus="focusTest(this); return false;" />
<br/>
<input type="text" value="two" OnFocus="focusTest(this); return false;" />
</body>
</html>
When either input field is clicked in Firefox or IE, that field is highlighted. However, this doesn't work in Safari. (NOTE: it works when tabbing between fields.)
I noticed Safari is actually selecting the text then removing the selection quickly.
So I tried this quick workaround that works in all browsers:
function focusTest(el)
{
setTimeout (function () {el.select();} , 50 );
}
Edit :
Upon further testing it turns out the OnMouseUp event is clearing the selection so it is enough to add
onMouseUp="return false;"
to the input element for things to work as they should.
Not sure about a Safari-specific solution here, but an alternative would be to wrap the input element in a div and set the border properties of it via CSS. Then change border color, etc. when focused and unfocused.