Thursday, November 29, 2012

Placeholder not cleared on focus to text field solution.

HTML 5 input field has not been cleared on focus to the text box. I faced this issue while developing blackberry applications. On focus to first time it will be cleared and second time placeholder has been considered as input string. So it is not been cleared. Actual Scenario: The placeholder is visible for the user and user has to delete in order to enter input string. Expected Scenario: Tapping on any input fields placeholder should be wiped out in order to enter user's input The same issue is also observed on IE 9. It happens due to older browsers JavaScript engines does not have the support to the placeholder. Look at the image here for the issue...
jQuery is having the fix for this issue. Here is the code to fix the placeholder issue with older browser.
 $('[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().parents('form').submit(function() {  
  $(this).find('[placeholder]').each(function() {  
   var input = $(this);  
   if (input.val() == input.attr('placeholder')) {  
    input.val('');  
   }  
  })  
 });  
Kknow more about the fix.

No comments: