This question already has answers here:
jquery input select all on focus
(17 answers)
Closed 9 years ago.
Id like to select all text from input on focusing:
<input id="selectMe" value="123" />
<input type="button" id="focusHim" value="Im working fine" />
JS:
$('#selectMe').focus( function() {
$(this).select();
console.log('focus fired');
});
// little test if focus event works fine
$('#focusHim').click( function() {
$('#selectMe').focus();
});
This simplified code works fine, but sometimes there are some issues.
Here you have fiddle: http://jsfiddle.net/daxv2/
To see my problem, please click on input #selectMe, then click somewhere else and on #selectMe again. You will see, text is selected every even attempt. I don't know why.
P.S.
When you change focus to click it works perfect:
$('#selectMe').click( function() {
$(this).select();
console.log('focus fired');
});
So i suppose there is some problem with focus event.
It seems like the WebKit browsers interfere with this because of the mouseup event.
I added this and it seems to work fine:
$('#selectMe').mouseup(function () {
return false;
});
http://jsfiddle.net/daxv2/6/
You could use click event instead of focus. It works fine, also you can simplify your code by using this.select() instead of $(this).select()
http://jsfiddle.net/daxv2/8/
Related
I've been working on trying to trigger an onchange listener with java script in Mozilla Firefox. I've found a lot on Stack Overflow posted about this, but nothing seems to be working for my unique case.
I've created this HTML with a onchange listener from an onchange event using this helpful post (JavaScript OnChange Listener position in HTML markup). Here's my code:
<HTML>
<head>
<script type="text/javascript">
window.onload= function () {
if(window.addEventListener) {
document.getElementsByClassName('search-box')[0].addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('It worked');
}
}
function addTextCallListener() {
var searchBox = document.getElementsByClassName("search-box")[0];
searchBox.value = "Hello";
}
</script>
</head>
<BODY>
<input type="text" class="search-box" placeholder="Player Search">
<br \>
<button type="button" onclick="addTextCallListener()">Click Me!</button>
</BODY>
</HTML>
I also saved it as this jsfiddle (for some reason I had to keep it all together for it to work, I couldn't break it up into js and html).
https://jsfiddle.net/josephfedor42/crogL0zd/1/
If you play with this jsfiddle you can see that entering text and pressing enter will trigger the listener and the pop up with the message “It worked” will appear.
But if the button “Click Me!” is pressed it only changes the value of the text box, and the onchange listener is not called.
I realize I could easily add an onchange event to this button. But I want to to trigger the listener by programatically/ superficially using javascript in my addTextCallListener() function.
I've tried the simple stuff, like calling
searchBox.onchange();
searchBox.focus();
searchBox.click();
And a combination of these to add and remove the focus. But it doesn't seem to work. I've found quite a few posts on triggering an onchange event, but nothing that works in Firefox.
Any help would be appreciated.
Thanks for that link of a possible duplicated question. I had checked out that link before.
But I gave it a try again. I saved the jsfiddle from them both and neither one work.
My implementation of Dorian's answer
https://jsfiddle.net/josephfedor42/zaakd3dj/
My implementation of Alsciende's answer
https://jsfiddle.net/josephfedor42/xhs6L6u2/
emphasize mine
According to the mdn page about the change event,
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user.
and to whatwg specs :
When the input and change events apply (which is the case for all
input controls other than buttons and those with the type attribute in
the Hidden state), the events are fired to indicate that the user has
interacted with the control.
Therefore, setting the value of an input is not an action "committed by the user" nor a sign that "the user has interacted with the control", since it was made by the code.
So, even if the specifications for this event are kind of unclear, the event should not fire when you change its value by code.
Something like this should work:
function addTextCallListener() {
var searchBox = document.getElementsByClassName("search-box")[0];
searchBox.value = "Hello";
//fire the event
if (document.createEvent) {
searchBox.dispatchEvent('change');
} else {
searchBox.fireEvent("onchange");
}
}
Here is the code I needed to add to my function addTextCallListener:
var evObj = document.createEvent('HTMLEvents');
evObj.initEvent( 'change', true, true );
searchBox.dispatchEvent(evObj);
I updated the jsfiddle. The working code is here https://jsfiddle.net/josephfedor42/crogL0zd/7/
Replace onchange with change in this part:
document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);
I am trying to write a code which will make HTML dropdowns readonly but not "disabled" because I want to capture the default values in current form that are coming from previous form.
I have written the below code which is working perfectly fine in Chrome but not working in IE. What could be the possible solution to this.
Below is the jquery code that I have written.
$("#Q4Q25xP1_1, #Q4Q25xP1_2, #Q4Q25xP1_3, #Q4Q25xP1_4, #Q4Q25xP1_5").each(function(){
$(this).on("mousedown", function(e){
return false;
}).on("change", function(){
$(this).find('option').each(function(i, opt) {
opt.selected = opt.defaultSelected;
});
}).css("background-color","grey");
});
Try this one, just disable options which are not selcted
$("#Q4Q25xP1_1,#Q4Q25xP1_2,#Q4Q25xP1_3").find("option").each(function () {
if ($(this).attr("selected") != "selected") {
$(this).attr("disabled", 'disabled');
}
});
and here is the jsfiddle for reference https://jsfiddle.net/3v0w9n3r/
And it works in all browsers including IE.
You can try setting the pointer-events to none using CSS:
<select style="pointer-events:none;">
....
$("#Q4Q25xP1_1, #Q4Q25xP1_2, #Q4Q25xP1_3, #Q4Q25xP1_4, #Q4Q25xP1_5").each(function(){
$(this).attr('disabled','disabled');
}
"Change" event is not consistent in browser,In Firefox and Chrome it work properly
but in IE need to clicked TWICE, first to remove "indeterminate" state, then again to fire the change event. so you need to use trigger click event to click second time so event initialize and work.
So you need to use trigger mousedown for second time apply mousedown event on same element than change event work properly
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 8 years ago.
<input id="ok" />
$('.hor-minimalist-a').on('blur','#ok',function(){
});
with this code above, i can handle events which fire If i leave the input field.
How can I detect if someone clicks outside of inputfield without coming to input. I mean the user never came to this input field before, so there was no focus at all.
$('.hor-minimalist-a').on('?','#ok',function(){
?
});
$(document).on('click', function(e) {
if ( e.target.id != 'ok' ) {
// you clicked something else
}
});
That would capture any click except on the input, but why would you need it ?
To capture only clicks on .hor-minimalist-a and not the entire document, just replace document with that selector in the code above.
How about:
$('.hor-minimalist-a').on('click',':not(#ok)',function(){
That'll register click events within .hor-minimalist-a but outside the input #ok
There is a jquery plugin for that:
http://benalman.com/code/projects/jquery-outside-events/examples/clickoutside/
I've been googling for about 2 hours to fix the following problem (other Stackoverflow Questions included):
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('input[type="radio"]').unbind('click.preset')
.bind('click.preset', function() {
doingStuffWith(jQuery(this).val());
});
});
</script>
<input type="radio" name="lightType" value="led" />
<input type="radio" name="lightType" value="tube" />
As you can see, I'm just trying to retrieve the current value of the radio button group "lightType" to work with it. This is working like a charm in Firefox / Safari / Chrome, but IE8 is giving me a hard time by just returning an empty string.
I've already tried several hacks from other questions like binding the change event to the radio buttons und forcing IE8 to fire it by blurring the clicked radio button etc. Maybe I'm
just suffering from blindness right now.
I'm working with the latest jQuery version and I've made sure that no other binded events interfere. Interestingly though, adding an alert() before retrieving the value and IE returns the current value:
....
// DOES WORK
alert();
alert(jQuery(this).val()); // alerts e.g. "tube"
// DOESN'T WORK
alert(jQuery(this).val()); // alerts ""
I thought it could be a timing problem, but trying to delay my single alert call with setTimeout didn't help.
Thanks in advance guys, I hope I'm just blind and didn't find another ugly behaviour in IE8.
I would use the latest jQuery and on() and the :checked selector in the callback:
jQuery(document).ready(function() {
jQuery('input[type="radio"]').on(function('change blur mousedown click') {
alert(jQuery('input[type="radio"]:checked').val());
});
});
Actually this is a little bit tricky, you can not fetch the selected radio button with "this" in the callback you have to use an other selector:
How can I know which radio button is selected via jQuery?
Thank you for your answers, but none worked. I'm not sure if this is a bug in jQuery or is just a problem I've hit in my particular case. It seems like jQuery is forcing IE8 to fire the change event before the field really changes.
I've finally solved it by binding to the blur event and combining it with powtacs :checked solution like this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('input[type="radio"]').unbind('click.preset')
.bind('click.preset', function() {
jQuery(this).blur();
}
jQuery('input[type="radio"]').unbind('blur.preset')
.bind('blur.preset', function() {
doingStuffWith(jQuery('input[type="radio"]:checked').val());
});
});
</script>
A fair option for IE8 is creating a class (!) in each radio option and use it to selected the checked option. Semantically it is a little weird, but it worked perfectly to me:
HTML
<input type="radio" name="example" class="example_class" value="1"/>#1
<input type="radio" name="example" class="example_class" value="2"/>#2
<input type="radio" name="example" class="example_class" value="3"/>#3
JS
var exampleValue = $('.example_class:checked').val();
I found out that when pasting text (i.e. Hello) by using the mouse, the following function will throw an empty popup:
$('input:text').onpaste = function()
{
alert($('input:text').val());
});
The thing is, when the onpaste event is being fired, the text is not yet actually pasted to the input field (at least that's my guess). So changing the function to:
$('input:text').onpaste = function()
{
setTimeout(function()
{
alert($('input:text').val()
}, 100);
}
gives a correct result by showing a popup with the text Hello when pasted to the input field.
Now my question: is there is any possibility to catch the pasted text without using the setTimeout() function? This workaround seems quite dirty so I'd love to not have to use it.
kkthxbai
xon1c
you can use the oninput event instead, modern browsers support this method
http://jsfiddle.net/pxfunc/KDLjf/
$('input').bind('input', function(e) {
console.log($(this).val());
});
$('input:text').bind('paste', function() {
alert($(this).val());
});
try this to get the data being pasted:
$("input:text").bind('paste', function(e) {
var text = e.event;
alert(text);
});
The timeout is needed to get the dom updated so the value is actually in the input field. you could also use the change event to check if the input box is updated http://api.jquery.com/change
I don't think the bellow code works on IE8 since the input value is not changed when alert() executed.
$('input').bind('input paste', function(e) {
alert($(this).val());
});
on Firefox and Chrome, it works fine.