• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2433
  • Last Modified:

Looking to solve input placeholder IE 8 compatibility issue.

I have the following implemented and it's not quite working correctly. And you can only see my solution in IE 8 as it checks if placeholder is compatible because IE 8 doesn't have support for the "placeholder" attribute and I'm trying to figure out a way to solve the issue so that it works in IE 8. You can see what I've started but the last remaining piece is when you focus on the password field it should change the input type to "password" and if you unfocus out of the field with no entry it should default back to "text" input type only if the val = "" or the user didn't actually enter anything. If there's a more streamlined way of what I've already done please share as well. Thx


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
jQuery(function() {
   jQuery.support.placeholder = false;
   test = document.createElement('input');
   if('placeholder' in test) jQuery.support.placeholder = true;
});

$(function() {
   if(!$.support.placeholder) {

      var active = document.activeElement;

      var pass = $('<input id="password" class="textbox" name="password" placeholder="Password" type="text">');
      $("#password").replaceWith(pass);

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

      $(document).on('focus click', '#password', function () {
         var pass = $('<input id="password" class="textbox" name="password" placeholder="Password" type="password">');
         $("#password").replaceWith(pass);
      });

   }

   $(active).focus();
   $(':text').blur();

   $('form:eq(0)').submit(function () {
      $(':text.hasPlaceholder').val('');
   });
});
</script>

<style>
   input {width: 150px;}
</style>

</head>
<body>
   <input id="login_id" class="textbox" name="login_id" placeholder="Username" type="text" /><br>
   <input id="password" class="textbox" name="password" placeholder="Password" type="password">
</body>
</html>

Open in new window

0
brihol44
Asked:
brihol44
1 Solution
 
GaryCommented:
0
 
brihol44Author Commented:
Because I didn't know about it. Thx!
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now