WordPress.org

Forums

Contact Form 7
Placeholder (watermark) not visible under older browser (6 posts)

  1. ckone
    Member
    Posted 2 years ago #

    I have been getting notes from users of my website that placeholder or aka watermark is not showing on IE8, Windows XP.

    I know, I know...use other browsers or update etc.

    However, users coming to my site cannot do those at the moment. I was wondering if there's a fix for this? I cannot say if previous versions of Contact Form 7 worked...but at least 3.5.1 and 3.5.2 are not working.

    FF works
    Chrome works
    IE 10 works
    IE 9 did not test yet
    IE 8 does not work

    Thanks for any tips and tricks!

    http://wordpress.org/extend/plugins/contact-form-7/

  2. buzztone
    Member
    Posted 2 years ago #

  3. Jonathan
    Member
    Posted 2 years ago #

    Does anyone have any further information on why this is no longer working. Previous versions worked fine, 3.4.2 however does not work in IE9, 8 & 7.

  4. Sunder Deep Dasna
    Member
    Posted 2 years ago #

    Watermark functionality is not working because of 'placeholder' attribute of the input type text.

    The 'placeholder' attribute is new in HTML5. So it is not working in the older browser.

  5. Jonathan
    Member
    Posted 2 years ago #

    Yep, I had got to that point. Just looking at a JS fix for IE.

  6. Jonathan
    Member
    Posted 2 years ago #

    Here's a working solution for all none HTML5 Browsers. Testing in Chrome 27, IE7, IE8, IE9, IE10, Firefox 21, Safari 5.1.7, All working as they should with/without HTML5.

    I've adapted on a solution from Pryley here

    // Check if browser supports HTML5 input placeholder
    function supports_input_placeholder() {
    	var i = document.createElement('input');
    	return 'placeholder' in i;
    }
    
    // Change input text on focus
    if (!supports_input_placeholder()) {
    	jQuery('.wpcf7-text').each(function() {
        	var self = jQuery(this);
    		var value = jQuery.trim(self.val());
    		if(value == '') self.val(self.attr('placeholder'));
        });
    	jQuery('.wpcf7-text').focus(function(){
    		var self = jQuery(this);
    		if (self.val() == self.attr('placeholder')) self.val('');
    	}).blur(function(){
    		var self = jQuery(this);
    		var value = jQuery.trim(self.val());
    		if(value == '') self.val(self.attr('placeholder'));
    	});
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.