placeholder的ie兼容性问题

在html中引用下面的js文件,且在样式文件中这样写:input,textarea{color:#999;}        input:focus,textarea:focus{color:#333;}

我这里只是简单的用全局样式这样写了,如果你不想所有的input框都有提示,可以给需要的input特定的类,比如:.txt {color:#999;}   .txt:focus{color:#333;}

(function($) {

 /**
  * Spoofs placeholders in browsers that don't support them (eg Firefox 3)
  *
  * Copyright 2011 Dan Bentley
  * Licensed under the Apache License 2.0
  *
  * Author: Dan Bentley [github.com/danbentley]
  */

 // Return if native support is available.
 if ("placeholder" in document.createElement("input")) return;

 $(document).ready(function(){
  $(':input[placeholder]').not(':password').each(function() {
   setupPlaceholder($(this));
  });

  $(':password[placeholder]').each(function() {
   setupPasswords($(this));
  });
   
  $('form').submit(function(e) {
   clearPlaceholdersBeforeSubmit($(this));
  });
 });

 function setupPlaceholder(input) {

  var placeholderText = input.attr('placeholder');

  setPlaceholderOrFlagChanged(input, placeholderText);
  input.focus(function(e) {
   if (input.data('changed') === true) return;
   if (input.val() === placeholderText) input.val('');
  }).blur(function(e) {
   if (input.val() === '') input.val(placeholderText);
  }).change(function(e) {
   input.data('changed', input.val() !== '');
  });
 }

 function setPlaceholderOrFlagChanged(input, text) {
  (input.val() === '') ? input.val(text) : input.data('changed', true);
 }

 function setupPasswords(input) {
  var passwordPlaceholder = createPasswordPlaceholder(input);
  input.after(passwordPlaceholder);

  (input.val() === '') ? input.hide() : passwordPlaceholder.hide();

  $(input).blur(function(e) {
   if (input.val() !== '') return;
   input.hide();
   passwordPlaceholder.show();
  });
   
  $(passwordPlaceholder).focus(function(e) {
   input.show().focus();
   passwordPlaceholder.hide();
  });
 }

 function createPasswordPlaceholder(input) {
  return $('<input>').attr({
   placeholder: input.attr('placeholder'),
   value: input.attr('placeholder'),
   id: input.attr('id'),
   readonly: true
  }).addClass(input.attr('class'));
 }

 function clearPlaceholdersBeforeSubmit(form) {
  form.find(':input[placeholder]').each(function() {
   if ($(this).data('changed') === true) return;
   if ($(this).val() === $(this).attr('placeholder')) $(this).val('');
  });
 }
})(jQuery);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值