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
Related
Hello I am working on a simple form that also uses place-holder text. I am implementing this behaviour with JQuery and not html attributes, mainly because the place-holder input also shows error messages to the user which need to be styled differently than plain place-holder text.
Right now the form behaves like this.
Clicking on the input hides the the place-holder input and sets focus on the main input field.
If the user has entered data then the place-holder does not show up.
Now this is all fine, but when the user presses the TAB key to change focus, none of the above happens.
Here is the relevant JQuery code and the HTML:
$("#plh_username").click(function(){
$(this).hide();
$("#username").focus();
});
$('body').click(function(e){
var target = $(e.target);
if(!target.is('#plh_username')) {
if ( $("#username").val() == "" ){
$("#plh_username").show();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="input" id="plh_username" class="inp_placeholder" value="Username" />
<input type="text" name="username" id="username" value="" />
How can I achieve the same effect when the user selects an input field without actually clicking on one?
You could try using .focus() and .focusout() instead of .click().
$("#plh_username").focus(function(){
$(this).hide();
$("#username").focus();
});
$('#username').focusout(function(){
if ($(this).val() === ""){
$("#plh_username").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="input" id="plh_username" class="inp_placeholder" value="Username" />
<input type="text" name="username" id="username" value="" />
<input value="Press tab or shift+tab" />
Quote from the documentation:
Elements with focus are usually highlighted in some way by the
browser, for example with a dotted line surrounding the element. The
focus is used to determine which element is the first to receive
keyboard-related events.
Dont use .click(). Use .focus().
I think you are looking for onfocus event. This event triggers when a control gains the focus.
$("#plh_username").focus( function(){
alert("focus")
});
for example see http://jsfiddle.net/wb2vef0g/
I must sincerely thank Darren Davies for his help with the following code from which I have made my test html file.
<html>
<head>
<title>field_enable</title>
<script type="text/javascript" src="script/jquery.js"></script>
<script>
$().ready(function() {
$('#clicker').click(function() {
$('input').each(function() {
if ($(this).attr('disabled')) {
$(this).removeAttr('disabled');
}
else {
$(this).attr({
'disabled': 'disabled'
});
}
});
});
});
</script>
</head>
<body>
<div id='clicker' style='background-color:#FF0000; height:20px; width:50px;'></div>
<br>
<input type='text' disabled></input>
<input type='text' disabled></input>
<input type='text' disabled></input>
</body>
</html>
This works perfectly however my form has a large number if fields within which I need to disable only certain one for various clients. When I apply the code it most certainly activates the fields that I have disabled however it also disables the rest of the fields in the form even though they have no attribute set. My problem now it to work out how to activate only the fields that I have disabled and leave the rest enabled.
If you only want to affect certain fields you could assign those fields a particular class (changeable in this example)
<input type='text' disabled class="changeable" />
and change this line
$('input').each(function() {
to
$('input.changeable').each(function() {
so that it only works on inputs with the given class
It's disabling the other fields because your "if" is telling it to do so. When you use:
if ($(this).attr('disabled'))
when the input doesn't has this attr, it fails the condition so it will disable the input! :)
What you can do to check is:
if ($(this).is("[disabled]") && $(this).attr('disabled')){
// do your stuff here
}
So using elem.is("attr-name") you can know if it has your attr.
Another solution was pointed out by Ivan, you can use classes to diference your inputs.
Cheers
I am trying to set focus on a textbox in a form that's a part of jQuery tree. Here is my code
$(document).ready(function() {
$("#search").focus();
});
HTML:
<div>
<form action="search" method="post" name="frmSearch>
<label for="search">Search:</label>
<input type="text" name="search" id="search" />
<input type="submit" name="button" value="Search" />
</form>
</div>
When I click on Search tab in the tree, it won't set focus on the textbox. Can someone let me know what's wrong in the code?
You're focusing the textbox on page load, however as soon as you click anywhere else on the page (such as a tab), the focus will be removed from the textbox and given to whatever you just clicked.
Instead of focusing on page load, attach a click listener to your tab so that when it is clicked the search textbox gets focus. Since I haven't seen all your markup, I'm using #mySearchTab as a placeholder for the ID of your search tab:
$(document).ready(function() {
$("#mySearchTab").on('click', function() {
$('#search').focus();
});
});
Also, don't forget to close your functions with a ).
I'm not sure what your tree looks like but here's a working demo using jQuery tabs.
try following:
$(function(){
$("input:first:text").focus();
});
working fiddle here: http://jsfiddle.net/8CTqN/2/
tested on chrome
I made some modification in your js codes
http://jsfiddle.net/8CTqN/5
$(document).ready(function(){
$(function(){
$("#search2").focus();
});
});
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 have a text field <input type="text" id="search" /> and I would like to execute a JavaScript function every time the user change the content in it (letter by letter). How can I do this using jQuery?
I tried to implement the function as the answer to Using JQuery, how do you detect if the value of a text input has changed while the field still has focus? but nothing happens for me.
Here is my HTML:
<html>
<head>
<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="/search.js"></script>
</head>
<body>
<form>
<input type="text" name="search" id="search" />
</form>
</body>
</html>
My search.js is:
var target = $('#search'), val = target.val();
function search()
{
alert('search');
}
target.keyup(search);
I have also tried with (nothing happens):
$('input[name=search]').change(function() {
alert('changed');
})
And if I try just adding some HTML using jQuery, it works:
$(function(){
$("<p>hello</p>").insertAfter("#search");
})
The change event doesn't fire until the control loses focus. If you are only interested in text, you can use .keypress() to do something before the contents change, or .keyup() to do something afterwards.
Here is an example using keypress in jsfiddle: http://jsfiddle.net/R6vmZ/