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();
Related
Place holder is not working in IE-9,so I used the below code for place holder.
jQuery(function () {
debugger;
jQuery.support.placeholder = false;
test = document.createElement('input');
if ('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function () {
if (!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$(':text.hasPlaceholder').val('');
});
}
});
When I am taking the value of test,it shows null.How can I get the details of all input tag?
I think this will help you
if ($.browser.msie) {
$("input").each(function () {
if (IsNull($(this).val()) && $(this).attr("placeholder") != "") {
$(this).val($(this).attr("placeholder")).addClass('hasPlaceHolder');
$(this).keypress(function () {
if ($(this).hasClass('hasPlaceHolder')) $(this).val("").removeClass('hasPlaceHolder');
});
$(this).blur(function () {
if ($(this).val() == "") $(this).val($(this).attr("placeholder")).addClass('hasPlaceHolder');
});
}
});
}
I'm on my mobile so this is hard but really you need to do
JQuery.support.placeholder = typeof 'placeholder' in test !== 'undefined'
Because null means there isn't any placeholder value, but there is placeholder support
From what I understand you're saying that the placeholder in test is returning null
I suggest you don't write this yourself and go for an off-the-shelf solution. There's more complexity here that you'd probably want to tackle yourself if all you want is provide support for older browsers.
For example, here's the shim I'm using (and that is recommended on http://html5please.com): https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.js
Go ahead and read the code. These are some issues you need to have in mind when writing such shim:
detect the browser support,
keep track when the box contains the real input or not;
add a class to allow different text colour for the placeholder,
clear the placeholders before submitting the form,
clear the placeholders when reloading the page,
handle textarea,
handle input[type=password]
And that's probably not even all. (The library I've linked also hooks into jQuery in order to make .val() return '' when there's no real input in the box.
There's also another shim that uses a totally different approach: https://github.com/parndt/jquery-html5-placeholder-shim/blob/master/jquery.html5-placeholder-shim.js
This library doesn't touch the actual value of the input, but instead displays an element directly over it.
HTML:
<input type='text' id='your_field' value='Enter value'/>
jQuery:
$(document).ready(function(){
$("#your_field").on('focusout',function(){
if($("#your_field").val() == ''){
$("#your_field").val('Enter value');
}
});
$("#your_field").on('focus',function(){
if($("#your_field").val() == 'Enter value'){
$("#your_field").val('');
}
});
});
See DEMO
Also check when the form is posted because if the user submits the form without entering the field then Enter value will be posted as the value of the field.So do either validations in client side or check in the server side when submitting the form.
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('');
}
});
});
}
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);
I have implemented through jQuery the placeholder HTML 5 attribute for the browsers that don't support it (all except webkit at this time).
It works really great but it has a small problem: it breaks the HTML 5 required="required" and pattern="pattern" attributes on Opera (it's the only browser that supports them currently).
This is because the placeholder value is temporarily set as the input value, and thus Opera thinks on form submission that the input is actually filled with the placeholder value. So I decided to remove the placeholders when the form is submitted:
$('form').submit(function() {
$(this).find(".placeholder").each(function() {
$(this).removeClass('placeholder');
$(this).val('');
});
});
This worked but another problem arose: if the form client-side validation failed (because of the required or pattern attributes) then the fields aren't re-given their placeholder value.
So, is there a way (js event?) to know if/when the form submission failed client-side, so I can re-add the placeholders?
Test case: open this with a browser that supports required/pattern but not placeholder (only Opera at this time). Try to submit the form without filling any of the inputs; you'll see that when you do the second input loses the placeholder. I don't want it to happen.
This is the complete code, but it's probably not needed:
function SupportsPlaceholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
$(document).ready(function() {
if (SupportsPlaceholder())
return;
$('input[placeholder]').focus(function() {
if ($(this).hasClass('placeholder')) {
if ($(this).val() == $(this).attr('placeholder'))
$(this).val('');
$(this).removeClass('placeholder');
}
});
$('input[placeholder]').keypress(function() {
if ($(this).hasClass('placeholder')) {
if ($(this).val() == $(this).attr('placeholder'))
$(this).val('');
$(this).removeClass('placeholder');
}
});
$('input[placeholder]').blur(function() {
if ($(this).val() != '')
return;
$(this).addClass('placeholder');
$(this).val($(this).attr('placeholder'));
});
$('input[placeholder]').each(function() {
if ($(this).val() != '' && $(this).val() != $(this).attr('placeholder'))
return;
$(this).val($(this).attr('placeholder')).addClass('placeholder');
});
$('form').submit(function() {
$(this).find(".placeholder").each(function() {
$(this).removeClass('placeholder');
$(this).val('');
});
});
});
read this: http://dev.opera.com/articles/view/making-legacy-pages-work-with-web-forms/
I didn't try, but it looks like you can check form validity this way:
if (form.checkValidity ){// browser supports validation
if( ! form.checkValidity()){ // form has errors,
// the browser is reporting them to user
// we don't need to take any action
}else{ // passed validation, submit now
form.submit();
}
}else{ // browser does not support validation
form.submit();
}
or simply check: element.validity.valid
btw. you should implement placeholder also for textarea - simply replace 'input[placeholder]' with 'input[placeholder], textarea[placeholder]'... and actually you don't need 'placeholder' class ;)
I need to focus out from the textbox when it focus in.
I try to set focus for outer div and its working fine in IE but not in mozilla.
How do I do this?
This is my current code:
<div id="outer"> <input type = "textbox" /></div> Onfocus: document.getElementById("outer").focus()
I wonder what's the purpose of using a textbox in this case if the user can never write anything inside. Just add a disabled="disabled" attribute or readonly="readonly" (in case you want to post the value).
In HTML:
<input type="text" onfocus="this.blur();" />
In JS:
document.getElementById("input1").onfocus = function () { this.blur(); }
Some elements cannot accept focus without being editable.
Where is the point in that? JS would be (didn't test it):
$('#textbox').focusin(function() {
$(this).focusout();
});
I have tried all the answers and not worked in all the browsers. And I combined all together in to it.
TextBox.readonly = true;
OnFocus:
var curText = TextBox.value;
TextBox.value = "";
TextBox.value = curText;
TextBox.blur();
TextBox_Parent.focus()
And its working fine in all the browsers
/*for textarea*/
$(document).ready(function() {
$('textarea[type="text"]').addClass("idleField");
$('textarea[type="text"]').focus(function() {
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
});
$('textarea[type="text"]').blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value == '')){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});
});
that's what I used on my form.