We Keep Coding

Placeholder code used for IE8 causing dropdown login field to lose focus

I am using the below placeholder code for IE8, however about 70% of the time when you move your mouse around in the dropdown login field it loses focus (the whole dropdown login field vanishes); through debugging - when I remove this code the problem goes away - I have found the cause of the problem is this code:
Edit: I have found it isn't caused by any particular placeholder code, but it IS caused by some part of the process as I have tried 3 separate placeholder plugins and it happens on all 3 of them; take them away and no problems.
$(document).ready(function() {
if ( !("placeholder" in document.createElement("input")) ) {
$("input[placeholder], textarea[placeholder]").each(function() {
var val = $(this).attr("placeholder");
if ( this.value == "" ) {
this.value = val;
}
$(this).focus(function() {
if ( this.value == val ) {
this.value = "";
}
}).blur(function() {
if ( $.trim(this.value) == "" ) {
this.value = val;
}
})
});
// Clear default placeholder values on form submit
$('form').submit(function() {
$(this).find("input[placeholder], textarea[placeholder]").each(function() {
if ( this.value == $(this).attr("placeholder") ) {
this.value = "";
}
});
});
}
});
You can view an example here: http://condorstudios.com/stuff/temp/so/header-sample.php
Edit: Not sure if it will help as jsfiddle doesn't work on IE8 and I can't test if the fiddle behaves badly in IE8 too, but here is the fiddle: http://jsfiddle.net/m8arw/7/
Any way to fix this?

Have you tried switching your event to show/hide dropdown to 'mouseenter' and 'mouseleave'?
It's a lot more reliable on old IE than 'focus' and 'blur' event. Also, bind the event directly on the 'dropdown' div is more preferable than on the 'input' element.
In short, please try change this part of your code like this.
$(function() {
var dropdown = $('div.login div.dropdown')
.on('mouseenter', function() {
dropdown.css('display', 'block');
})
.on('mouseleave', function() {
dropdown.removeAttr('style');
});
});

demo: http://so.devilmaycode.it/placeholder-code-used-for-ie8-causing-dropdown-login-field-to-lose-focus
$(function(){
$('#main_header .login li').hover(function(){
$(this).find('.dropdown').show();
},function(){
$(this).find('.dropdown').hide();
});
});
NOTE: i have also cleaned up and fixed some coding horror in your js code...

I use this code to implement placeholder on all browsers (it uses Modernizr to detect it):
Demo: http://jsfiddle.net/S3zQ9/
var placeholder_OnBlur = function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
};
var placeholder_OnFocus = function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
};
var placeholder_OnSubmit = function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
};
var placeholder_OnLoad = function () {
if (!!$(this).attr('placeholder')) {
$(this).on('focus', placeholder_OnFocus);
$(this).on('blur', placeholder_OnBlur);
$(this).parents('form').on('submit', placeholder_OnSubmit);
$(this).blur();
}
};
if (!Modernizr.input.placeholder) {
$('[placeholder]').each(placeholder_OnLoad);
}
Don't have IE8 to test it, but it should work.

How to find out user pressed "enter" in text input?

I'm trying to add text input's element to my array when user pressed enter key. but I don't know how to do that. I tried this if statements but they didn't work:
var val = $("#txbxfeeds").val();
if (val[val.length-1] == "\r") {
alert("HI");
}
if (val[val.length-1] == "\n") {
alert("HI");
}
How can I do this?

I can suggest the following:
var vals = [];
$("#txbxfeeds").on("keypress", function(e) {
if (e.which == 13) {
vals.push(this.value);
}
});
DEMO: http://jsfiddle.net/Q4CUf/

$("#txbxfeeds").on('keyup', function(e) {
//13 is the code for enter button
var val = $(this).val(); // or this.value
if(e.which == 13) {
alert( val );
}
});
Working sample
Read more about jQuery event.which

Dynamically Added Input Box isn't dynamically binded

I'm using the Jquery Input modernizer function called on document.ready from this link:
http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
In my JavaScript code, I am adding 2 INPUT boxes to the DOM. How can I dynamically bind these input objects so that they exhibit the same functionality as an input box that existed when the document was ready.
var add= '<input type="text" size="75" placeholder="This is a Comment" id="txtComment" />'
+ '<br /><input type="text" placeholder="2012-03-24" id="txtDate" /><br /><button id="submit">Submit</button>';
$(this).html(addTargetForm);
function modernizer_init() {
if (!Modernizr.input.placeholder) {
$('[placeholder]').onfocus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
}

This should work directly inside a $(function(){...}) structure but by all means put it in a function modernizer_init() {} if that's what your application needs.
javascript:
$("body").on('focusin', '[placeholder]', function(evt) {
var $input = $(evt.target);
if ($input.val() == $input.attr('placeholder')) {
$input.val('');
$input.removeClass('placeholder');
}
}).on('focusout', '[placeholder]', function(evt) {
var $input = $(evt.target);
if ($input.val() == '' || $input.val() == $input.attr('placeholder')) {
$input.addClass('placeholder');
$input.val($input.attr('placeholder'));
}
}).on('submit', 'form', function(evt) {
var $form = $(evt.target);
$form.find('[placeholder]').each(function() {
var $input = $(this);
if ($input.val() == $input.attr('placeholder')) {
$input.val('');
}
});
});
$('[placeholder]').focusout();
This works by delegating the handling of focusin (focus) and focusout (blur) events to the document body (or a more local container if you like), which is the jQuery 1.7.1 way to effect the now deprecated bind(), .live() and .delegate().
See it working : http://jsfiddle.net/wg2eX/2/

JavaScript workaround for not supported HTML5 elements and attributes

I am using Modernizr to detect unsupported HTML5 elements and attributes within browsers. If a element/attribute is not supported I like to write a quick workaround with jQuery.
At the moment I am stumbling around the "required" attribute with input element. My thought was to "detect" the associated form element and hook the jQuery .submit() event of the form. But how to do it?
To gain insight yourself here is a sample code how I fixed the "placeholder" attribute with input element:
if(Modernizr.input.placeholder == false) {
alert('input placeholder not exists, perform a workaround...');
$('[placeholder]').each(function() {
var input = $(this);
var placeholder = input.attr('placeholder');
input.bind('focus', function() {
if(this.value == placeholder) {
this.value = '';
$(this).removeClass('mzr-no-placeholder');
}
}).bind('blur', function() {
if(this.value == '') {
this.value = placeholder;
$(this).addClass('mzr-no-placeholder');
}
});
if(!this.value.length) {
this.value = placeholder;
$(this).addClass('mzr-no-placeholder');
}
});
}
else {
alert('input placeholder exists.');
}
Here is the solution
Thanks to greut.
if(Modernizr.input.required == false) {
alert('Tag input required not exists, perform a workaround...');
$('form').submit(function() {
var requirementsOK = true;
$('[required]', this).each(function() {
if(!this.value.length) {
$(this).addClass('mzr-no-required');
requirementsOK = false;
}
else {
$(this).removeClass('mzr-no-required');
}
});
return requirementsOK;
});
}
else {
alert('Tag input required exists.');
}

Here an hint on how to start that:
if (Modernizer.input.required === false) {
$('form').submit(function() {
$('[required]', this).each(function() {
if (!$(this).val()) {
alert('derp!');
return false;
}
}
}
}

Placeholders in IE

I am using this script : http://www.morethannothing.co.uk/wp-content/uploads/2010/01/placeholder.js to get some placeholders into IE. Works a treat for input types of text and password.
But just does'nt seem to load for Text Areas. Does anyone know of a line of code I could add to that, or maybes a little bit of jQuery or JavaScript to execute to get it to load.
Thanks in advance.

instead of $(':text[placeholder],:password[placeholder]') use $(':text[placeholder],:password[placeholder],textarea[placeholder]')

For all inputs and textarea:
$('input[placeholder],textarea[placeholder]')

<script type="text/javascript">
if(navigator.userAgent.indexOf("MSIE") > 0 )
{
$(function()
{
var input = document.createElement("input");
if(('placeholder' in input) == false)
{
$('[placeholder]').focus(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder'))
{
i.val('').removeClass('placeholder');
if(i.hasClass('password'))
{
i.removeClass('password'); this.type='password';
}
}
}).blur(function()
{
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder'))
{
if(this.type=='password')
{
i.addClass('password'); this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function()
{
$(this).find('[placeholder]').each(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder')) i.val('');
});
});
}
});
}
</script>