Develop Reference

jQuery - IE fadeIn(), then immediately fadeOut() issue

I'm not sure if this is a clicking issue, or specific to the jQuery fade functions.
I have the HTML structure like this: label > input(hidden) + div + label text
Example:
<label data-name="primary-residence" data-value="Yes">
<input type="hidden" id="primary-residence" name="Primary Residence" value="" />
<div class="big-check-box"></div>
Primary Residence
</label>
And the jQuery is as follows:
$('label').on('click', function(){
var name = $(this).data('name');
var value = $(this).data('value');
if($(this).find('.big-check-box').hasClass('checked')){
$(this).find('.big-check-box').removeClass('checked');
$('#'+name).val('');
$('#'+name+'-value, #'+name+'-loan-balance').fadeOut();
}else{
$('#'+name).val(value);
$(this).find('.big-check-box').addClass('checked');
$('#'+name+'-value, #'+name+'-loan-balance').fadeIn();
}
});
I have a big-box that acts as a checkbox and has data attributes that then populate a hidden field to be collected on form submission. It also applies a class to the checkbox and fades in two new input fields.
Everything works fine in Chrome and FF, but in IE, the class doesn't get applied to the box and the new input fields fade in, then immediately fade out once the fade in animation is complete. Unless they are clicked twice, then it seems to work, but that isn't very intuitive or user friendly.
Here's a fiddle to a working example: jsFiddle
Anyone know why this is happening?

I figured it out.
For some reason I needed to add preventDefault() for the IE fix. Not exactly why it works, but here's reference: <label> - HTML | MDN
Here's the updated lines:
$('label').on('click', function(e){
e.preventDefault();
.....
});
Hope this can help someone else in the future.

Input value returns an empty string due to input font-size="0"

I found a problem which has bothered me for several weeks. I am using jQuery to retrieve the input text. The user enters some characters and hits ENTER, and I print the text in console.
html:
<input id="abc" type="text" autofocus style="font-size:0;">
jQuery:
$(document).on('keypress', '#abc', function(e) {
if (e.which!=13) {
return;
}
console.log('Entered: ' + $('#abc').val());
$('#abc').val('');
});
If I use Firefox, everything is fine. However, if I use Chrome or Opera, they will return a empty string.
I finally found out that the problem comes from font-size="0" (I want to hide the input). If the value is anything other than 0, Chrome and Opera will have no problem picking up the entered text.
Questions:
Why is that?
How do I hide the <input> element and it can still take user inputs?

To answer your second question, you can use CSS styles such as text-indent.
The text will be hidden offscreen and you'll stilll be able to get the value.
<input id="abc" type="text" autofocus style="text-indent:-9999em;">
I do believe that there are other ways to achieve this... like positioning the input offscreen
<input id="abc" type="text" autofocus style="position:absolute; left:-9999em; top:-9999em">
but your project seems pretty specific.

Force Text Caret To Appear In Readonly Input

Scenario: When an input field is set .readOnly = true, the text cursor is replaced with the pointer arrow cursor and the input field cannot be entered or modified. However, clicking into such a readonly input field with text in it does actually register the cursor's location within the text, even though the display does not show the clicked location by visually rendering a text cursor caret, like a read-enabled input field would.
Here's the question: Is there a way to force the text cursor caret to appear in an input field set .readOnly = true, in other words, as if the input field were actually read enabled, but still keep the input field readonly?

What you want to achieve is actually an existing bug in few browsers.
Check this answer
But you can achieve this by below workaround.
Remove readOnly attribute and try with below code
$('document').ready(function() {
$('input[type="text"]').keydown(function(e) {
return false;
});
$('input[type="text"]').bind("cut copy paste", function(e) {
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="some value" />

You can do this with css :
input[readonly] {
cursor: text;
}
or
<input type="text" style="cursor: text;">

Issue with jQuery :not selector

I have a search icon that when hovered over reveals an input text search box. I'm using jQuery to add a class to the input to reveal the text box when the search icon is hovered over. That is working fine.
The next function is that if the user decides not to click in the search box and elsewhere on the page, the search box goes away. That's working fine too.
The only remaining issue is that if the user clicks in the search box, it also goes away which I don't want.
My HTML:
<input type="text" class="form-text text-hidden" title="Enter the terms you wish to search for." value="" size="15" id="edit-search-block-form-1" name="search_block_form" maxlength="128">
<input type="image" src="http://d3j5vwomefv46c.cloudfront.net/photos/large/802431483.png?1377197793" class="form-submit search-hover" alt="Search" id="edit-submit">
My jQuery:
$(".search-hover").hover(function () {
$('.text-hidden').addClass('hover');
});
// Now remove the class in case of a false start or the user decides to do something else.
$("body:not(.text-hidden)").click(function(){
//alert('The body click is working!!!');
$('.form-text.text-hidden').removeClass('hover');
});
Note that I'm attempting to use the :not selector to indicate to only remove the hover class if clicked anywhere but the search box but it's not working.
I've got a fiddle here

Try
jQuery(function(){
$(".search-hover").hover(function () {
$('.text-hidden').addClass('hover');
});
// Now remove the class in case of a false start or the user decides to do something else.
$("body").click(function(e){
//alert('The body click is working!!!');
if($(e.target).closest('.text-hidden').length == 0)
$('.form-text.text-hidden').removeClass('hover');
});
})
Demo: Fiddle

The problem is that when you click the input, the body's click event still arises.
There's a simple solution. Just stop the event's propagation when the input's being clicked.
jsFiddle Demo
$(".form-text.text-hidden").click(function(e) {
e.stopPropagation();
});
P.S - Notice that I've removed the :not selector from the JS. It has become unnecessary.

Text Fields - onLoad 'Username/Password', onClick/Focus Changes Color, onKeyDown Disappears (Similar to Twitter)

I am working on a login with a simple email-field and password-field.
I have all the basics of what I want but I can't put them all together.
What I want is the same look of the TEXT FIELDS as twitter.
What I mean by that is when the two fields aren't selected they say "Email" and "Password"
But when they are selected the text is unselectable and the cursor appears in the front.
As soon as you type they disappear and whatever you type appears.
The easiest solution is just adding a background image to them.
I have done this but do not want this look. Its not precise enough for me.
If you are confused with what I am looking for go to twitter and look at their LOG IN fields where they say username/password. I want that same look. Any help is GREATLY appreciated.
Thank You.
Please given in HTML, CSS or JavaScript if possible but any solution is appreciated.

<script type="text/javascript">
function clearInput(this) {
var currValue = document.getElementById(this).value;
if (currValue != '') {
currValue = '';
}
}
</script>
<input type="text" id="login" value="email" class="input-box" onchange="clearInput(this);">
<input type="password" id="password" value="password" class="input-box" onchange="clearInput(this);">
This is not tested by should work....
You can use any number of JS events so you will have to shoose the one which gives the timings you want.
Hope this helps.

Try using placeholder="your placeholder" on the inputs?
then you can use fall back jquery scripts to provide the functionality for older browsers

First, the javascript.... if you're using jQuery, this should take your text fields and remove the values in them (Email, etc) when click in them and bring them into focus.
$(function() {
$('input[type=text]').focus(function() {
$(this).val('');
});
});
Your html should look similar to this....
<input type="text" name="email" value="email"/>
<input type="password" name="password" value="password" />
To get the border highlight effect, you can add some css....note that this example will add a green border around all inputs (text fields, text areas, etc) when they are focused. You can change this by using id's or specifying the input type.
input:focus { border: 1px solid green;}
if you're trying to get the default text to disappear on keydown instead of on focus, one approach is to give each of the inputs an id, and then use a flag to check to see if the event handler (e.g the text disappearing) has already fired, on each of the ids...
$(function() {
var passFired = false;
var emailFired = false;
var email = $('#email');
var pass = $('#password');
email.keydown(function() {
if(!efired){
efired = true;
$(this).val('');
}
});
pass.keydown(function() {
if(!pfired){
pfired = true;
$(this).val('');
}
});
});