We Keep Coding

jQuery's .on blur function executes incorrectly in Firefox

The client wants a form in which entered numbers behave like Excel in certain ways. In particular, the data saved and the data displayed can be different, as it can in Excel. For example, the data saved could be 32425.537342 and the data displayed could be $32,425.54.
The approach we have taken to accomplish this is by using input pairs, one of type='text' and one of type='number'. The number input, which is by default hidden, stores the data to be sent and the text input displays it to the user. The number input is only displayed when the corresponding text input is focused, at which time such text input is hidden.
This following code behaves as expected in Chrome.
HTML:
<input type="text">
<input type="number">
<br>
<input type="text">
<input type="number">
jQuery:
$(document).ready(function(){
$("[type='number']").hide();
$("[type='text']").on("focus",function(){
$(this).next().show().focus();
$(this).hide();
});
$("[type='number']").on('blur',function(){
$(this).prev().show();
$(this).hide();
});
});
Fiddle. However, in Firefox (version 33.1.1) for Mac OS, the same is not working at all. When the text input is focused on, it disappears completely, without the number input ever being displayed.
In trying to ascertain where the problem is, I cut the code back to this:
$(document).ready(function(){
$("[type='number']").hide();
$("[type='text']").on("focus",function(){
$(this).next().show().focus();
$(this).hide();
});
});
Fiddle. This actually works as expected in both Chrome and Firefox; on focus, the text input is permanently hidden and the number input is permanently displayed.
So it seems that the issue is in the second half of the code. If you take out the $(this).hide();, the code behaves consistently in Chrome and Firefox (although not in a way that's particularly useful):
$(document).ready(function(){
$("[type='number']").hide();
$("[type='text']").on("focus",function(){
$(this).next().show().focus();
$(this).hide();
});
$("[type='number']").on('blur',function(){
$(this).prev().show();
/* $(this).hide(); */
});
});
Fiddle. Likewise, if you remove only $(this).prev().show();, it also behaves the same in Chrome and Firefox: everything ultimately ends up hidden.
$(document).ready(function(){
$("[type='number']").hide();
$("[type='text']").on("focus",function(){
$(this).next().show().focus();
$(this).hide();
});
$("[type='number']").on('blur',function(){
/* $(this).prev().show(); */
$(this).hide();
});
});
Fiddle. The divergence in behavior only occurs when both lines are in there; Chrome hides one input and shows the other, whereas Firefox causes everything to disappear as soon as you focus on the text input.
I thought this might be related to the Firefox focus/blur issue that makes it behave strangely in iframes (example), but taking it out of JSFiddle's iframes didn't have any effect. Fiddle in full screen here.
So how do I make the behavior in Firefox match the behavior in Chrome?

This answer provided JavaScript that did the trick, and using that I was able to put together the equivalent in jQuery:
$(document).ready(function(){
$('[type="number"]').hide();
$('[type="text"]').on('focus',function(){
$(this).next().show().focus();
$(this).hide();
});
$('[type="number"]').on('blur',function(){
var $this = $(this);
setTimeout(function() {
if(!$(document.activeElement).is($this)){
$($this).hide();
$($this).prev().show();
}
}, 0);
});
});
Fiddle.
To quote from that answer as to why this is necessary:
[T]he issue is that different browsers choose to call event
handlers in different orders. One solution is to give the other events
a chance to fire by setting a timer for 0 milliseconds, and then
checking the fields to see which (if any) is focused.

Is it okay to add an addEventListener to an entire page

I'm trying to show a textarea element when I click on an input element. The goal is to show the textarea, but when I click anywhere else, the textarea disappears.If I click anywhere on the textarea, it stays visible.
I saw a similar example of one on stackoverflow --> Link to similar question
The method was to add an addEventListener to the html tag by using document.documentElement, so basically the whole page, but I was wondering if there was an alternative? And is it safe to add an addEventListener to an entire page?
The code to addEventListener to entire page:
document.documentElement.addEventListener('click',clickhandler,false);
I'm not trying to be picky either, but I would like to avoid using a timeout on the element
Besides the code above, I first tried using the click event, and everything works fine, but when I click anywhere else the textarea doesn't disappear.
I then tried the focus/blur events, but when the input loses focus, the textarea disappears.
I was thinking of an if conditional for the click function... but I'm not sure how that would work without adding a click event to the entire page...
JSFiddle : http://jsfiddle.net/LghXS/
HTML\
<input type="text" id="email">
<textarea id="suggestion"></textarea>
CSS
textarea{
display:none;
}
JS
var textarea = document.getElementById('suggestion');
var input = document.getElementById('email');
// Using the Click Event
input.addEventListener('click',function(){
var display = textarea.style.display;
if(display === '' || display === 'none'){
textarea.style.display='inline-block';
}else{
textarea.style.display='none';
}
});
// Using the Focus and Blur
/*
input.addEventListener('focus',function(){
textarea.style.display='inline-block';
input.addEventListener('blur',function(){
textarea.style.display='none';
});
});
*/
Sooo, any ideas?

Keeping an iPad keyboard up between inputs

Right now I'm using a bit of jQuery to hide the iPad keyboard when an input loses focus.
jQuery(function($) {
$(document).on('touchend', function(e) {
document.activeElement.blur();
});
});
However during a process like the checkout when a user clicks from input to input the keyboard disappears and the reappears every time the input is changed. Is there any way to change the above jquery code to where it only blurs the active element if the place on the document that is touched does NOT have an input type of text?

Well, I haven't tried this with iPad before, so I'm not sure that it will work, but you can check the type of document.activeElement to determine if it is a text or textarea field. If it isn't, then perform your blur(). The code would be like this:
jQuery(function($) {
$(document).on('touchend', function(e) {
setTimeout(function() {
var currentElement = document.activeElement;
if ($(currentElement).not("textarea, :text").length > 0) {
currentElement.blur();
}
}, 100);
});
});
The setTimeout is needed to make sure that the focus has transferred to the next element, before checking what the current element is (doing it immediately, will return the <body> as the activeElement).
This general approach (i.e., identifying what type the current activeElement is) works in a desktop browser environment, and it SHOULD work on an iPad, but, like I said earlier, I've not had a chance to test it there, so this is more of a "possible solution" than an actual "answer", until you give it a try and se if it works for you. :D

Detect texbox clear-event in IE. How do I clear the input type="text" (textbox) in IE (Internet Explorer) when IE-specific clear-box is clicked?

In Internet Explorer, there is a little x-like button is shown, when you start typing in the textbox. How do I detect the event when this icon is clicked on? Is there an event-type?
<input type="text" value ="" id ="qsearch" name="qsearch"
onBlur="qsearchLookup(this.value);" OnClick="qsearchLookup(this.value);"
onkeyup="qsearchLookup(this.value)" size="26">
function qsearchLookup(searchVal){
document.getElementById("qsearch").value="";
}

I do not know about special event for this small x-like button, and I don't think that it exists, but you can use input event (oninput="qsearchLookup(this.value)" in your case) to catch this change.

Am not sure, if still someone is looking for a solution. Unfortunately there is no event handler available for the clear(X) icon, however below code snippet/tricks worked for me. CSS to complete hide the clear(X) icon and if you don't want to hide the clear(X) icon but need to handle then JS code snippet would help.Verified in IE 8,9,10,11 and it works fine
CSS trick:
#textFieldId::-ms-clear {display: none;} -- For a particular text field
or
input[type=text]::-ms-clear { display: none; } -- for all text fields in scope
OR
JavaScript trick (to reset the text field value to empty/blank and fire the html event KeyUp. Accordingly you can change per your need)
$('#textFieldId').bind("mouseup", function() {
var $input = $(this);
var oldValue = $input.val();
if (oldValue == "") {
return;
}
setTimeout(function() {
var newValue = $input.val();
if (newValue == "") {
$input.trigger("keyup");
}
}, 1);
});

This worked pretty well for me :)
$input.addEventListener('mouseup', function(){
setTimeout(function(){
if ($input.value === '') do_stuff();
}, 1)
});
$input being a reference to the input element.

input.on('input propertychange',function(e){})
this works for ie10 (input) and ie8 (propertychange) but not for ie9
i actually fixed it for ie9 with the mousedown event, not pretty ,but that and mouseup are the only events that fire on it

How to deslect highlighted text in textbox if already highlighted?

So I have this very simple JS function that selects all the text in the ASP.NET texbox (input):
function selectAllText(textbox) {
textbox.focus();
textbox.select();
}
..and it gets called like this on the click event:
$("#<%=Textbox1.ClientID %>").click(function () { selectAllText(jQuery(this)) });
The problem is no matter how many times a user clicks in the text box all of the text is always selected. I understand why this is occuring (based on the way my code above is), but it doesn't work well when the user tries to click in the middle of a word to get the cursor back to make a modification to the text.
How do I modify this JS to tell if the text is already highlighted and then deselect the text? This was on subsiquient click, the user can get the single cursor on a precise clicked location to make a modification.
I am trying to get the documentation on the .select() method to see if I could do if(!textbox.select()), but I am having a hard time finding it, so post any doc links as well if you have them.
EDIT: This problem and need for a workaround seems to be for IE (I am using IE9). In Chrome the behavior by default is what I need, but this is for an intranet application that runs on IE, so it appears I need an explicit workaround.
Thanks!

Is it necessary to do the .focus() in this function? You could instead attach a simple .select(); to the onfocus event (.bind('focus', function(){..})): http://jsfiddle.net/EGHzj/

Try this
$(document).ready(function(){
$('input').bind('click',function(){
if($(this).hasClass('selected')){
$(this).toggleClass('selected');
}else{
this.focus();
this.select();
$(this).toggleClass('selected');
}
});
});
This should work in IE also,
http://jsfiddle.net/rAqgw/7/

function selectAllText(textbox) {
// if there isn't selected text.
if (textbox[0].selectionEnd) {
textbox.focus();
textbox.select();
}
}
$('#txt').click(function() {
selectAllText($(this));
});
Live DEMO
​