We Keep Coding

Placeholder text issue in IE browsers(8-9)

I am working on form(input field) validation.
Problem - IE browsers(8-9) consider the placeholder text as value and during validation it accepts the same value, however it should be considered as an empty value. I don't wanna use any script and to achieve it, I came up with below function. Can anybody improve the usability/scope of the function little bit more. Currently it makes input field blank everytime user enters the value. However, I want it to validate for first time when placeholder default text comes into action. Any suggestion?
HTML
<input type="text" name="memberid" id="memberid" placeholder="Some Value" />
Search
jQuery
$('#search-btn').on('click', function(){
if($.browser.msie){
$('input').each(function() {
var theAttribute = $(this).attr('placeholder');
if (theAttribute) {
$(this).val('');
alert('Please enter value - IE');
}
});
}
});

placeholder creates problem in < IE 9 so you can use data() like
HTML
<input type="text" name="memberid" id="memberid" data-placeholder="Some Value" placeholder="Some Value"/>
SCRIPT
$('#search-btn').on('click', function(){
if($.browser.msie){
$('input').each(function() {
var theAttribute = $(this).data('placeholder');
if (theAttribute == this.value) {// check placeholder and value
$(this).val('');
alert('Please enter value - IE');
}
});
}
});

I think the best way to achieve what you want to do is to build a complete solution for placeholders in IE8 and IE9. To do that, what I suggest is to use Modernizr, with the input placeholder function detection. So, you could use a function like this:
window.ie8ie9placeholders = function() {
if (!Modernizr.input.placeholder) {
return $("input").each(function(index, element) {
if ($(element).val() === "" && $(element).attr("placeholder") !== "") {
$(element).val($(element).attr("placeholder"));
$(element).focus(function() {
if ($(element).val() === $(element).attr("placeholder")) {
return $(element).val("");
}
});
return $(element).blur(function() {
if ($(element).val() === "") {
return $(element).val($(element).attr("placeholder"));
}
});
}
});
}
};
This will enable placeholders for IE8 and IE9. All you need to do is to use it when you initialize your code.
ie8ie9placeholders();

Is there a js function I could use that would make the placeholder attribute work in IE? [duplicate]

This question already has answers here:
Input placeholders for Internet Explorer
(17 answers)
Closed 9 years ago.
Right now I have a bunch of input tags in my project that use a placeholder, like this:
<input id="Name" name="Name" placeholder="Name Goes Here" type="text" value="">
Is there a js function that I could place in my global js script that would change the input tag if the browser is IE?
For example, if the browser was internet explorer, I could run a specific javascript function that would change ALL my placeholders to something that IE uses (if that even exists)

// Detect the browser, as you want. I'm using the follwowing way
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{
replacePlHolders();
}
// replace all the placeholders with a simple text input
function replacePlHolders()
{
var plInps = $("input[placeholder]");
plInps.each(function(){
var name=$(this).attr("name");
var newInput = $("<input type='text' name='"+name+"' value='"+name+" goes here'>");
$(this).replaceWith(newInput);
var defaultValue = name + " goes here";
newInput.on('focus', function() {
// If this value of the input equals our sample,
// hide it when the user clicks on it.
if(this.value === defaultValue)
this.value = '';
});
newInput.on('blur', function() {
// When they click off of the input, if
// the value is blank, bring back the sample.
if(this.value === '')
this.value = defaultValue;
});
});
}
Place this code in your global Javascript file and this will do the magic for you.
Check the fiddle here

Please check out jquery-html5-placeholder-shim

if(!Modernizr.input.placeholder){
$('[placeholder]').focus(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('');
}
});
});
}

jQuery - How to make the input values ("email", "password") reappear when out of focus?

When I click inside the input fields the values "Email" and "password" disappear which is what I want. But if the user doesn't enter his email/pass and clicks somewhere else, I want "Email" and "Password" to reappear.
jQuery:
$('.login-user, .login-pass').focus(function() {
$(this).val("");
});
Html:
<input type="text" name="user" value="Email" tabindex="1" class="login-user" />
<input type="password" name="password" value="Password" tabindex="2" class="login-pass" />
Thanks.

Update:
I finally got around to doing a dead-simple plugin for supporting the placeholder attribute on browsers that don't do it natively. Been planning to for a long time, and I have a project that needs it, so... place5 (the plugin) auto-detects native support and leaves things alone (by default) on browsers that can do the job themselves (although you can override that if you really want to use the plugin instead).
Original answer:
I'd probably do it as a plug-in I could reuse, but basically, since you're dealing only with inputelements, it can be quite simple:
$(".login-user, .login-pass").each(function() {
$(this)
.focus(function() {
if (this.value.length === this.defaultValue) {
this.value = "";
}
})
.blur(function() {
if (this.value.length === 0) {
this.value = this.defaultValue;
}
});
});
That uses the defaultValue of the input element to set the value if the value is blank when the user leaves the field, and to clear the value when the user enters the field if it's the default value. This assumes you use value="placeholder to show" in your markup.
A more thorough solution would use the new placeholder attribute and use feature-detection to see whether it was supported (which it sadly isn't in IE, and even in Firefox 3.6 but I bet 4.0 has it). I keep meaning to do something up...

You should really consider doing this better, even using placeholder attribute, but...
$('.login-user, .login-pass').each(function() {
var input = $(this);
input.focus(function() {
if ($.trim(input.val()) != this.defaultValue) {
return;
}
input.val('');
});
input.blur(function() {
if ($.trim(input.val()) != '') {
return;
}
input.val(this.defaultValue);
});
});
jsFiddle.
...will fix the issue you are having.

$('.login-user').blur(function() {
if(this.value.length == 0)
{
this.value = "Username"
}
});
This might be able to be improved, if so please let me know.

Complete solution which resolves most of the problems of your task:
$('.login-user, .login-pass').focus(function() {
var $this = $(this);
if (!$this.data('defaultValue') || $this.data('defaultValue') == $this.val()) {
if (!$this.data('defaultValue')) {
$this.data('defaultValue', $this.val());
}
$(this).val('');
}
}).blur(function(){
var $this = $(this);
if ($this.val().length === 0) {
$this.val($this.data('defaultValue'));
}
});

Use title attributes for default values, then with a little plugin you can achieve what you want.
HTML
<input type="text" name="user" value="Email" tabindex="1" class="login-user" title="Email" />
<input type="password" name="password" value="Password" tabindex="2" class="login-pass" title="Password" />
JavaScript
(function(a){a.fn.extend({defaultVal:function(){return this.each(function(){var c;var b=a(this);c=b.attr("title");if(b.val()==""){b.val(c)}b.attr("title","");b.focus(function(){var d=a(this);if(d.val()==c){d.val("")}}).blur(function(){var d=a(this);if(d.val()==""){d.val(c)}})})}})})(jQuery);
$('.login-user,.login-pass').defaultVal();
And this is live example
Here decompressed version of my little defaultVal plugin (for learning purposes) ;)
(function ($) {
$.fn.extend({
defaultVal: function () {
return this.each(function () {
var defaultValue;
var $this = $(this);
defaultValue = $this.attr("title");
if ($this.val() == "") {
$this.val(defaultValue);
}
$this.attr("title", "");
$this.focus(function () {
var $that = $(this);
if ($that.val() == defaultValue) {
$that.val("");
}
}).blur(function () {
var $that = $(this);
if ($that.val() == "") {
$that.val(defaultValue);
}
});
});
}
});
})(jQuery);

How to not submit watermark text?

I have this code:
$(document).ready(function() {
$('.watermark').focus(function() {
if (this.className == 'watermark')
{
this.className = '';
this.reset = this.value;
this.value = '';
}
});
$('.watermark').blur(function() {
if (this.value == '')
{
this.className = 'watermark';
this.value = this.reset;
}
});
});
And it works fine, but when I submit my form the watermarks are submitted as data. Without modifying my php processing file, is it possible for watermarked text to be submitted as blank? What I mean is: if the textbox's class is 'watermark' submit a blank value for said textbox. I don't want to modify my php processing file but I do not mind using JQuery. Would the best solution be to capture the submit button's click event and quickly set textbox's with a watermark values to blank?

this should work if i understood you correctly:
$('form').submit(function(){
$(this).find('.watermark').each(function(){
if(!this.reset)
this.value = '';
});
});

Use the placeholder attribute on your text input elements:
<input type="text" placeholder="Text goes here" id="foo" />
Since this doesn't work in some older browsers, add an HTML5 placeholder attribute fallback script to your page (like this or this).

keyup Uppercase on event

I would like to have an input that would change to upper case on keyup. So I attach a simple event on keyup.
HTML
<input id="test"/>
Javascript (with jQuery)
$("#test").keyup(function(){
this.value = this.value.toUpperCase();
});
But I found that in Chrome and IE, when you push left arrow, the cursor automatically move to end. I notice that I should detect if the input is letter only. Should I use keycode range or regexp for detection?
Example: http://jsbin.com/omope3

Or you can use the following (this is probably faster and more elegant):
<input style="text-transform: uppercase" type='text'></input>
But that sends the as-typed value back in the form data, so use either of the following to store it as all-caps in the database:
MySQL: UPPER(str)
PHP: strtoupper()

Another solution, if you use the text-transform: uppercase; css property:
<input id='test' style='text-transform: uppercase;' type='text'></input>
And with jQuery help you choose the blur event:
$("#test").blur(function(){
this.value = this.value.toUpperCase();
});
With this solution, you don't have to upper the database fields, you can use the cursor for movement and the user can insert/rewrite the text in the input field.

Use this:
<input onkeyup="MakeMeUpper(this)" type="text"/>
And in your JS Code Part put:
function MakeMeUpper(f, e){
var actualValue = f.value;
var upperValue = f.value.toUpperCase();
if( actValue != upperValue){
f.value = upperValue;
}
}
This code won't change the text if the user entered something that is not text (left or right arrow).

Yeah, looks like some browsers move the cursor to the end when the value gets updated. You could do this:
$("#test").keyup(function(){
var upper = this.value.toUpperCase();
if (this.value != upper)
this.value = upper;
});
which will only change the value if it needs to be changed. However, that still leaves you with the problem that if you type abd, move left, hit c to get abcd, the cursor will still get moved to the end.

Javascript (with jQuery)
$("#test").keyup(function(){
$(this).val($(this).val().toUpperCase());
});

var str = $(this).val();
if (evt.keyCode != 37 && evt.keyCode != 39)
{
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
});
$(this).val(str);
}

You probably want to look at keyCode in your keyup function.
var UP_ARROW = 38,
DOWN_ARROW = 40;
$('#test').keyup(function(evt){
if (evt.keyCode == UP_ARROW)
{
this.value = this.value.toUpperCase();
}
if (evt.keyCode == DOWN_ARROW)
{
this.value = this.value.toLowerCase();
}
});