CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorerplaceholder
user2695680
user2695680

Reputation:

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" />
<a href="#" class="alpha-btn" id="search-btn">Search</a>

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');
            }
        });
    }
});

Upvotes: 0

Views: 1432

Answers (2)

Leonardo Barbosa
Leonardo Barbosa

Reputation: 1396

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();

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

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');
            }
        });
    }
});

Upvotes: 1

Related Questions