temporary solution to address IE compatibility issue with jquery

Question

temporary solution to address IE compatibility issue with jquery

Due to lack of placeholder support in Internet Explorer for input elements, I am attempting to implement a workaround using jQuery.

My goal is to have the field value initialized on page load. While I have successfully achieved this on field focus, I'm struggling to make it work upon page load. For example, the following code works:

// This Works on focus, "Email" is shown in text box
$(function() {
  $("#login_email").focus(function()
  {
      if ($(this).val() == "")
      {
          $(this).val("Email");
      }
  });
});

// Even though I expected this to initialize on page load, it does not work ???
// This does not work

$(function() {
  $("#login_email").val("Email");
});

How can I resolve this issue?

What is the reason behind option two not working while option one does? What sets them apart??

jquery html css

Answer 1

Answer №1

Here is a helpful suggestion

Javascript

$(function() {
    $("#username").val($("#username").attr("placeholder"));

    $("#username").on("focus", function() {
      var input = $(this);
      if (input.val() == "") {
          input.val(input.attr("placeholder"));
      } else if(input.val() == input.attr("placeholder")) {
          input.val("");
      }
    });

    $("#username").on("blur", function() {
      var input = $(this);
      if (input.val() == "") {
          input.val(input.attr("placeholder"));
      }
    });
});

html

<input type="text" id="username" placeholder="Enter username">

This method allows for greater reusability.
For more information, visit the JsFiddle link: http://jsfiddle.net/SUdbs/

Answer 2

Here is a helpful suggestion

Javascript

$(function() {
    $("#username").val($("#username").attr("placeholder"));

    $("#username").on("focus", function() {
      var input = $(this);
      if (input.val() == "") {
          input.val(input.attr("placeholder"));
      } else if(input.val() == input.attr("placeholder")) {
          input.val("");
      }
    });

    $("#username").on("blur", function() {
      var input = $(this);
      if (input.val() == "") {
          input.val(input.attr("placeholder"));
      }
    });
});

html

<input type="text" id="username" placeholder="Enter username">

This method allows for greater reusability.
For more information, visit the JsFiddle link: http://jsfiddle.net/SUdbs/

Answer 3

Answer №2

$(".#login_email").val("Email")
    .focus(function(){
        if($(this).val() == "Email"){
            $(this).val("");
        }
    })
    .blur(function(){
        if($(this).val().length == 0){
            $(this).val("Email");
        }
    });

This script creates a placeholder-like input field. Instead of the placeholder disappearing when focused, it fades out which can help reduce code bloat.

Answer 4

$(".#login_email").val("Email")
    .focus(function(){
        if($(this).val() == "Email"){
            $(this).val("");
        }
    })
    .blur(function(){
        if($(this).val().length == 0){
            $(this).val("Email");
        }
    });

This script creates a placeholder-like input field. Instead of the placeholder disappearing when focused, it fades out which can help reduce code bloat.

Answer 5

Answer №3

Here is the solution I came up with:

$("#login_email, #login_password").blur(function() {
    var input = $(this);
    if (input.val() == '') {
        input.addClass("placeholder");
        input.val(input.attr("placeholder"));
    }
});
// To prevent a potential race condition, this block of code is executed after a small delay.
setTimeout(function() {
    $("#login_email, #login_password").each(function() {
        var input = $(this);
        if (input.val() == '') {
            input.addClass("placeholder");
            input.val(input.attr("placeholder"));
        }
    });
}, 50);

Answer 6

Here is the solution I came up with:

$("#login_email, #login_password").blur(function() {
    var input = $(this);
    if (input.val() == '') {
        input.addClass("placeholder");
        input.val(input.attr("placeholder"));
    }
});
// To prevent a potential race condition, this block of code is executed after a small delay.
setTimeout(function() {
    $("#login_email, #login_password").each(function() {
        var input = $(this);
        if (input.val() == '') {
            input.addClass("placeholder");
            input.val(input.attr("placeholder"));
        }
    });
}, 50);

temporary solution to address IE compatibility issue with jquery

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to execute a Python script by clicking the Submit button in HTML using Django?

.comment {Visibility:hidden;} is only functioning on one specific page

What is the best way to expand and collapse a mat-expansion-panel using a button click

Using Vue.js to dynamically populate all dropdown menus with a v-for loop

Enhance your website with dynamic effects by incorporating CSS3 columns and responsive layouts. Utilize CSS3 or jQuery/JavaScript to

The behavior of the Bootstrap toggle with a chevron varies between the production environment and the local

What is the best way to center a div vertically inside another div?

Arranging Nav Items in a Stack with Bootstrap 4

Tips for accessing a PHP file across multiple domains

Utilize CSS to incorporate special characters as list markers

Dynamic Dropdown Options in Angular 6 HTML Input Field

jQuery - auto reload page after clicking

What are the steps to turn off responsive view in WordPress?

Tips on passing a variable into a controller using jQuery AJAX from the URL

Having trouble using the search feature on ngx-mat-select-search for typing?

Achieve a "upload file" button

Showing an incorrect rendering appearance, the styled <select> element in Bootstrap4 is not

Ensure the http request is finished before loading the template

Is the each() method in jQuery essentially a for loop?

PHP and MySQL collaborate to create a dynamic, customizable list for