Placeholder (watermark) not visible under older browser

  • ckone

    (@ckone)


    10 years, 10 months 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/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Neil Murray

    (@buzztone)

    10 years, 10 months ago

    See http://www.wufoo.com/html5/attributes/01-placeholder.html

    Jonathan

    (@jag1989)

    10 years, 10 months 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.

    Sunder Deep Dasna

    (@shashank-mukherjee)

    10 years, 10 months 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.

    Jonathan

    (@jag1989)

    10 years, 10 months ago

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

    Jonathan

    (@jag1989)

    10 years, 9 months 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'));
	});
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Placeholder (watermark) not visible under older browser’ is closed to new replies.