I wonder how to set the focus to an input field on the mouseover event.
I wonder how to onload input field or onfocus field for typing when onmouseover to it so it easily ready to type when cursor touching or onmouseover cursor to input field of search box.
You can use the focus() method to focus an HTML element. Here's an example of its usage:
var inputField = document.getElementById('idOfYourInputField');
inputField.addEventListener('mouseover', function() {
inputField.focus();
});
Not sure what you are expecting here but if you want something like at certain position on page if user moves mouse you want the textbox to get Focus you can do something like:
<div id='d1'>
<input type='text' id='txt' value='Search'/>
</div>
and with Jquery:
$().ready(function(){
$('#d1').mouseover(function(){
$(this).children().closest('Input[type=text]').focus();
});
});
Using jQuery:
$('.input-element').mouseover(function() {
$(this).focus();
})
Or if you want to control the focus and blur events
$('.input-element')
.mouseenter(function() {
$(this).focus();
})
.mouseleave(function() {
$(this).blur();
});
Related
So I've looked around at doing this as I need to get around an iOS bug, and none of my simulated clicks seem to work. I'm trying to manually focus on a textarea element but to do that I need to manually simulate a click on said textarea element. So here's what I've tried:
$('#text-input')[0].click();
$('#text-input').click();
$('#text-input').trigger('click');
$('#text-input').focus();
and
$('#text-input').on('click', function {
$(this).focus();
});
$('#text-input').trigger('click');
$('#text-input').on('touchstart', function {
$(this).focus();
});
$('#text-input').trigger('touchstart');
HTML:
<textarea id="comment-input" class="comment-input" rows="1" maxlength="{{maxTextLength}}" ng-model="newMessage.content" placeholder="{{ messagePlaceholder }}" />
Any thoughts on why this isn't working?
try .focus instead of click like
$('#text-input').trigger('focus');
or Just
$('#text-input').focus();
UPDATE
You can try setTimeout which works in most case
$("#text-input").on("click", function(event) {
setTimeout(function() {
$(event.target).select(); //or $(event.target).focus();
}, 1);
});
UPDATE 2
You can also try to use touchstart event like
//trigger touch on element to set focus
$("#text-input").trigger('touchstart');
//event handler to set the focus()
$('#text-input').on('touchstart', function () {
$(this).focus(); // inside this function the focus works
});
when I change the value of a text input and then blur that input it triggers the input change event again. How can it register this blur as an input change? is there a way to prevent this?
$('input').on('input change',function(){
//do something
});
$(function(){
$('#onchange').on('change',function(){
alert('changed')
});
$('#onEveryLetter').on('input',function(){
alert('onEveryLetter')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
onchange: <input type="text" id="onchange" name="Jenish" />
<br/>
onEveryLetter: <input type="text" id="onEveryLetter" name="Jenish" />
Simply remove the change event from your code. The change event is fired onblur, but only if something has been changed since it was last blurred.
Use:
$('input').on('input',function(){
//do something
});
Jenish's answer is correct. What's more... For those who are using a delegated listener like jQuery .on(), Here is an example that allows you to capture all the change events on the other form elements (textarea, select, etc) and ignore the change event triggered by a blur on text INPUTs.
$('div').on('input change',function(e){
// This will keep the text INPUT from triggering for change event on blur.
if(e.type == 'change' && e.target.nodeName == 'INPUT') {
return false;
}
// Text INPUTs still pick up on the input event here
});
I am trying for checking condition for textfield is focus or not
if($.txt_username.foucs() == 'true'){
alert('textfield username focus');
}
else{
alert('textfield username out of focus');
}
any one advice me how to check the condition for textfield is focus () or blur();
add focus and blur events in your code to check when field is focussed and blurred. update boolian variable to set focus or blur state .Check that variable to perform any operation which you want to perform on focus or non focus (blur ) of textField.
$.txt_username.addEventListener('focus', function() {
focussed = true;
});
$.txt_username..addEventListener('blur', function() {
focussed = false;
});
if(focussed){
//do whatever you want when field is focus
}else{
//do whatever you want when field is not focus
}
focus is a jQuery function to set a focus handler function to the element. It doesnt test for whether the element is currently focused.
Example of use of focus:
$( "#target" ).focus(function() {
alert( "Handler for .focus() called." );
});
Could you rewrite your logic so that you are notified when the element is focused? In the focus event handler you could write your code.
blur also works the same way. You can assign a blur handler function using the blur() function.
Testing for focus with JS:
var selected = document.activeElement;
if (selected.id == "myTxtIdUName") {
alert('Field username focused');
}else{
alert('Field username NOT focused');
}
Note: Active element of html page in a background window doesn't have focus. So, if you want to check for that also, you can use selected.hasFocus for more accurate results.
We have a lot of inputs in a document.
We want to open a dialog that generates text and puts that in the currently focused input.
The problem is that, when I click a button or anything else to open the dialog that input loses focus. I can't determine which input has to get the generated text.
$("#button").click(function(){
// something should goes here to prevent stealing inputs focus
});
Is there any solution to prevent stealing focus by that special button?
You could not use a form button and just use say a <span> make it behave like a button?
UPDATE:
You could use something like
$('span').hover(function(){
focused_element = $("*:focus").get(0);
});
$('span').click(function(){
focused_element.focus();
});
Check out my fiddle
Does your field have a unique ID? If it does, use that ID to set the focus back to the field when the dialog's save/close button is clicked.
Don't worry about having the focus stolen as much as resetting it once you are done.
My solution would be to handle every focus and save it in focusEle:
$(function () {
var focusEle;
$('*').focus(function () {
focusEle = this;
});
$('button').click(function (e) {
console.log(focusEle);
var c = confirm('Love the cat :3?');
$(focusEle).focus();
});
});
With HTML as:
<input type="text">
<button>Press me!</button>
Example is working: http://jsfiddle.net/76uv7/
Depending on #ggzone idea
Then the user uses TAB or SHIFT-TAB to "jump" to a certain text-box and that text-box happens to have a value in it, then that value will be auto-selected. I would like to disable this behavior.
I assume that can be done inside the focusin event handler:
$("input:text").focusin(function() {
// "un-select" the value and place the text-cursor
// at the beginning or end of the value
});
$(function() {
$('input').bind('focus', function(e) {
return false;
});
});
Using jQuery 1.4.3+ you can use the shortcut version:
$(function() {
$('input').bind('focus', false);
});
Example: http://www.jsfiddle.net/P8LDB/