Develop Reference

Jquery .on('dblclick') event not firing in firefox [duplicate]

Apparently a disabled <input> is not handled by any event
Is there a way to work around this issue ?
<input type="text" disabled="disabled" name="test" value="test" />
$(':input').click(function () {
$(this).removeAttr('disabled');
})
Here, I need to click on the input to enable it. But if I don't activate it, the input should not be posted.

Disabled elements don't fire mouse events. Most browsers will propagate an event originating from the disabled element up the DOM tree, so event handlers could be placed on container elements. However, Firefox doesn't exhibit this behaviour, it just does nothing at all when you click on a disabled element.
I can't think of a better solution but, for complete cross browser compatibility, you could place an element in front of the disabled input and catch the click on that element. Here's an example of what I mean:
<div style="display:inline-block; position:relative;">
<input type="text" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​
jq:
$("div > div").click(function (evt) {
$(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​
Example: http://jsfiddle.net/RXqAm/170/ (updated to use jQuery 1.7 with prop instead of attr).

Disabled elements "eat" clicks in some browsers - they neither respond to them, nor allow them to be captured by event handlers anywhere on either the element or any of its containers.
IMHO the simplest, cleanest way to "fix" this (if you do in fact need to capture clicks on disabled elements like the OP does) is just to add the following CSS to your page:
input[disabled] {pointer-events:none}
This will make any clicks on a disabled input fall through to the parent element, where you can capture them normally. (If you have several disabled inputs, you might want to put each into an individual container of its own, if they aren't already laid out that way - an extra <span> or a <div>, say - just to make it easy to distinguish which disabled input was clicked).
The downside is that this trick unfortunately won't works for older browsers that don't support the pointer-events CSS property. (It should work from IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events
If you need to support older browsers, you'll need to use one of the other answers!

Maybe you could make the field readonly and on submit disable all readonly fields
$(".myform").submit(function(e) {
$("input[readonly]").prop("disabled", true);
});
and the input (+ script) should be
<input type="text" readonly="readonly" name="test" value="test" />
$('input[readonly]').click(function () {
$(this).removeAttr('readonly');
});
A live example:
$(".myform").submit(function(e) {
$("input[readonly]").prop("disabled", true);
e.preventDefault();
});
$('.reset').click(function () {
$("input[readonly]").prop("disabled", false);
})
$('input[readonly]').click(function () {
$(this).removeAttr('readonly');
})
input[readonly] {
color: gray;
border-color: currentColor;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myform">
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<button>Submit</button>
<button class="reset" type="button">Reset</button>
</form>

I would suggest an alternative - use CSS:
input.disabled {
user-select : none;
-moz-user-select : none;
-webkit-user-select : none;
color: gray;
cursor: pointer;
}
instead of the disabled attribute. Then, you can add your own CSS attributes to simulate a disabled input, but with more control.

$(function() {
$("input:disabled").closest("div").click(function() {
$(this).find("input:disabled").attr("disabled", false).focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div>
<input type="text" disabled />
</div>

Instead of disabled, you could consider using readonly. With some extra CSS you can style the input so it looks like an disabled field.
There is actually another problem. The event change only triggers when the element looses focus, which is not logic considering an disabled field. Probably you are pushing data into this field from another call. To make this work you can use the event 'bind'.
$('form').bind('change', 'input', function () {
console.log('Do your thing.');
});

OR do this with jQuery and CSS!
$('input.disabled').attr('ignore','true').css({
'pointer-events':'none',
'color': 'gray'
});
This way you make the element look disabled and no pointer events will fire, yet it allows propagation and if submitted you can use the attribute 'ignore' to ignore it.

We had today a problem like this, but we didn't wanted to change the HTML. So we used mouseenter event to achieve that
var doThingsOnClick = function() {
// your click function here
};
$(document).on({
'mouseenter': function () {
$(this).removeAttr('disabled').bind('click', doThingsOnClick);
},
'mouseleave': function () {
$(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
},
}, 'input.disabled');

I did something very similar the Andy E; except I used a surrounding tag. However, I needed the 'name' so I changed it to an tag without the 'href'.

There is no reason you can't simulate the disabled attribute using a combination of CSS and readonly:
Faux-Disabled: <input type="text" value="1" readonly="1" style="background-color:#F6F6F6;"><br>
Real-Disabled: <input type="text" disabled="true" value="1"></input>
Note: This will not have the regular behavior of disabled in the <form>, which prevents the server from seeing the field. This is just in case you want to disable a field that doesn't matter server-side.

I find another solution:
<input type="text" class="disabled" name="test" value="test" />
Class "disabled" immitate disabled element by opacity:
<style type="text/css">
input.disabled {
opacity: 0.5;
}
</style>
And then cancel the event if element is disabled and remove class:
$(document).on('click','input.disabled',function(event) {
event.preventDefault();
$(this).removeClass('disabled');
});

suggestion here looks like a good candidate for this question as well
Performing click event on a disabled element? Javascript jQuery
jQuery('input#submit').click(function(e) {
if ( something ) {
return false;
}
});

How can I do something on input checkout?

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.

focusout on any TextBox

I want to call a javascript function on focusout of a textbox. I have quite a lot of TextBoxes so to prevent a listener for every TextBox is there any possibility of calling the same javascript method on any textBox focusout passing the value of the Textbox as an parameter?
I want to do this on client side and not on server side.

With jQuery, it's as simple as
$("input").focusout(function(){
//Whatever you want
});
As pointed out by Milney, you probably want to interact with that specific textbox. To do this, you'd use "$(this)" as a selector.
$("input").focusout(function(){
$(this).css("background-color", "beige");
});

Use
$("input").focusout(function(){
var tBval = $(this).val();
console.log(tBval);
// OR Call a function passing the value of text box as parameter
//myFunction(tBval);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />

The blur event occurs when the field loses focus.
Try this:
$("input").blur(function(){
//alert("ok")
});

Auto-highlight an input field on focus

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.

Observing change in radio button selection using Prototype JS

I'm relatively new to Prototype JS (v1.7), and I'm stuck on something. I'm trying to detect when a change in the radio button selection occurs. Here's the code:
Radio buttons:
<input class="amounts" type="radio" name="amount" id="amount-1" value="1" />
<input class="amounts" type="radio" name="amount" id="amount-2" value="2" />
<input class="amounts" type="radio" name="amount" id="amount-3" value="3" />
Javascript:
Here's a stab I took at it, which doesn't work:
Event.observe($$('amounts'), 'change', function(event) {
alert('change detected');
});
When the form loads, no radio buttons are checked. I'd like the Javascript to detect these events:
A radio button is selected when none was previously selected
The radio button selection changes
Any help would be greatly appreciated.

It doesn't work because $$ returns an array of elements and Event needs a single element. Also $$('amounts') doesn't match any elements, there are no <amounts> tags.
A better way is to use a single ancestor element which is easy to identify.
<form id="amounts-form">
<input class="amounts" type="radio" name="amount" id="amount-1" value="1" />
<input class="amounts" type="radio" name="amount" id="amount-2" value="2" />
<input class="amounts" type="radio" name="amount" id="amount-3" value="3" />
</form>
Now there is a unique ID to work with we can use Event.on
$('amounts-form').on('change', '.amounts', function(event) {
alert('change detected');
});
Notice the events are being filtered by '.amounts', the period says to use the class name.
If you're using FireBug for FireFox or Chrome's developer tools then you can test parts of your script directly in the console. It really helps to find if a selector is matching the elements you think it is by typing $$('.amounts')

Alternegro's answer attempts to use an iterator to attach the event handler directly to the "amount" radio elements but doesn't work for a few reasons:
The "$" function doesn't take css selectors as parameters, only ids. Use "$$" instead.
The css "id" attribute selector should include square braces "[]". It's also spelled wrong. "amounts-" should be "amount-" to match the ids in the example. Or just use a class selector instead: ".amounts".
There is no "change" method that can be called on enumerables. Use invoke or some other enumerable method instead.
This one should work:
$$("[id^=amount-]").invoke(
'on',
'change',
function(){alert("hello " + this.id)}
)
(YMMV using "this" in the event handler. I only checked the code in Firefox)

Its more efficient to just give those checkboxes the same class but u can also try
$("id^=amounts-").change(function(){alert("blah blah")})