Here is my code:
$(document).on('checkout', 'input', function(){
alert('input is not focused anymore');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
But that alert won't be shown when I checkout of that input. I mean nothing happens when I click everywhere except focus on the input. Sorry I don't know English as well and I cannot explain what exactly I want. I want to apply something like stackoverflow's search box.
As you can see it in the top of current page, when you click on the search input (which is into stackoverflow's header), the width of the input will be increased (and some other css properties will be set), and when you click on somewhere else (checkout event ), the width will be toggled. I want to do something like this anyway.
Why checkout event has no reaction in my code?
There is nothing like checkout event, its blur i.e. focus lost for an input element. It is triggers when the input lost focus.
$('input:text').bind('focus blur', function() {
$(this).toggleClass('red');
});
input{
background:#FFFFEE;
}
.red{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="calc_input" type="text" name="start_date" id="start_date" />
<input class="calc_input" type="text" name="end_date" id="end_date" />
<input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" />
</form>
Check the above example, in this the color of input is changed on focus and re-changed on blur. In the same way you can increase the width of input and vice versa.
Related
I have the following HTML form:
<form>
<input type="text" id="input1">
<input type="text">
<button>Submit</button>
</form>
I want to set the focus on #input1 when I blur on the Submit button. Here is the JS that I have:
document.querySelector('button').onblur = function() {
console.log('blurred');
document.querySelector('#input1').focus();
};
I can see the console.log happening, but for some reason the focus isn't being set on #input1.
Try it here: https://jsbin.com/gukocuyada/1/edit?html,js,console,output
Thanks in advance!
Since the <button> is the last focusable element on the page, when you out of it, the browser will override the .onblur handler and simply move the focus to the URL bar. This seems to be built in to most browsers (at least Chrome and Firefox).
You can confirm this by adding another <input> field after the <button> and you will see that hitting does indeed focus on the first <input> field.
You can kludge your way around that default browser behavior by adding a fake input field at the end:
<input style="width: 0px; height: 0px; border: none;" onclick="document.querySelector('#input1').focus();">
OK, I know how to detect keyboard input. I know how to focus on keyboard input.
But I want to know what the best practice is for detecting keyboard input => focusing to textarea or textfield => AND enter that key into the field.
Here's how it would work: I'm on a page. I type A. Then my textfield gets focused and A is typed into the field. This sounds trivial but actually I haven't found a simple way to do this. The reason is because the initial keyboard input event is not directed towards the textfield, and I need to propagate that event to the newly focused text field.
Is there a conventional approach to doing something like this?
Sample html:
<form>
<input type="text" />
<input type="text" id="thisguy" />
<input type="text" />
<input type="text" />
</form>
jQuery for above html
$(document).live('keypress', function (e) {
$('#thisguy').val($('#thisguy').val() + String.fromCharCode(e.which));
});
Needs to be cleaned up. Maybe set focus instead of changing the text value.
I was wondering if there was a way for text inside a input box (pre loaded using value="") to highlight when the user clicks on it?
input type='text' name='url' id='url' value='http://www.a-link.com/' />
EDIT
I need the text to he highlighted so the user can copy it.
<input type="text" name="textbox" value="Test" onclick="this.select()" />
You could attach javascript to the click event to select the text like so:
$(document).ready( function() {
$('#id').click( function( event_details ) {
$(this).select();
});
});
There is a potential issue where the user could be trying to click at a later point in the text to correct a typing mistake and end up selecting the whole thing. A better way would be to trigger this when the input gets focus from the user. you'd replace .click with .focus in the example above.
jQuery event documentation:
http://api.jquery.com/category/events/
Add the following onclick attribute to make the entire <input> automatically highlight when the user clicks on it:
<input type="text" value="Test1" onclick="this.select()" />
Alternatively, if you want the user to be able to change the selection after the initial click, change the onclick attribute to an onfocus attribute. This will also highlight the entire <input> when the user clicks on it, but it allows them to change the highlighted part manually afterwards:
<input type="text" value="Test2" onfocus="this.select()" />
Here is an example of both inputs in action.
You want to use focus property. Like this: http://jsfiddle.net/sCuNs/
html
<p><input type="text" size="40"></p>
css
input:focus, textarea:focus{
background-color: green;
}
Do you mean to select the text?
Use onclick event to fire the code:
document.getElementById("target-input-id").select();
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
This should do it:
<input type='text' name='url' id='url' onclick="this.select()" value='http://www.a-link.com/' />
<input id="inputField" type="text" size="40" value="text to be highlighted"></p>
document.getElementById('inputField').focus();
The default behavior for focus selects the text in the input field. I was looking for a solution not to do that when I found this.
I'd like to enable the textbox when it is clicked. However, when I click the textbox, nothing happens. I believe it is a problem with the jQuery selector. Why isn't this working?
<script>
$(document).ready(function() {
$(':input').click(function() {
$(this).removeAttr('disabled');
});
});
</script>
<input type="text" value="123" disabled="disabled" />
Note: I tried both $('input') and $(':input') to select the textfield. Neither worked.
A disabled input isn't going to fire events. Try changing from disabled to readonly.
It has nothing to do with the selector you're using, but rather because, since the input element is disabled, the events for the input will not fire - see: http://www.jsfiddle.net/DvZDh/
<input type="text" value="123" disabled="disabled" />
<input type="text" value="123" />
The code works on the second input element, but not the first. A simple solution would probably be to use CSS to simulate the disabled state instead.
I am trying to get it so that when a certain value is put into a textbox, the focus will stay on the textbox(and an alert will be shown in production). I am trying to get this to work in Firefox 3.5.7 with no luck.
How can I make it so when a textbox is a certain value at onchange that it will stay focused/refocus on the textbox?
Live example is at http://jsbin.com/ipina
<body>
Enter your name: <input type="text" name="fname" id="fname" onchange="
if(this.value=='foo'){
this.select();
this.focus();
}
" />
</body>
Also, I don't get any javascript errors or warnings in the Error Console on executing this code.
When the onchange event is fired, the user is focused on the textbox.
Maybe you might want to use the blur event to re-focus on the textbox if the value is 'foo'.
If you need instantaneous results, you should use onkeyup.
<body>
Enter your name: <input type="text" name="fname" id="fname" onkeyup="
if(this.value=='foo'){
this.select();
this.focus();
}
" />
</body>
According to Javascript onchange different in IE and FireFox I needed to set the focus after the onchange event occurs, so I had to end up with something like this:
Enter your name: <input type="text" name="fname" id="fname" onblur="
if(this.value=='foo'){
alert('bah');
setTimeout('document.getElementById(\'fname\').focus();document.getElementById(\'fname\').select();',0);
}
" />
And also I had to catch it when the focus was lost, not necessarily when the text was changed, so I had to use onblur instead of onchange.
Live: http://jsbin.com/ofeva