解决HTML5 placeholder的方案

windows系统中以下浏览器测试通过:Google Chrome 18,Firefox 12,IE 9,IE 6,Opera 11.5。在android 4.0系统也测试了下，原生浏览器及Opera Mobile12基本通过，缺陷是获得焦点时会清空Placeholder提示。

jquery.placeholder.zhihu.js部分：

 

 代码如下 复制代码
   /*
    * html5 placeholder pollfill
    * - 使用绝对定位内嵌层
    * - 也适用于密码域
    * 目标浏览器: IE 6~9, FF 3.5
    ```
    // 默认
    $('input[placeholder]').placeholder()
 
    // autofocus 与 placeholder 搭配时，非 webkit 清空了提示文本，推荐
    $('input[placeholder]').placeholder({
      // 将删除原有 placehodler 属性，强制用 JS 实现替代
      useNative: false,
      // focus 时不清除提示文本， keypress 有效字符时才清空
      hideOnFocus: false,
      // 附加样式
      style: {
        textShadow: 'none'
      }
    })
    ```
    */
    (function ($) {
      var attr = 'placeholder', nativeSupported = attr in document.createElement('input')
 
      $.fn.placeholder = function (options) {
        return this.each(function () {
          var $input = $(this)
 
          if ( typeof options === 'string' ) {
            options = { text: options }
          }
 
          var opt = $.extend({
            text     : '',
            style    : {},
            namespace: 'placeholder',
            useNative: true,
            hideOnFocus: true
          }, options || {})
 
          if ( !opt.text ) {
            opt.text = $input.attr(attr)
          }
 
          if (!opt.useNative) {
            $input.removeAttr(attr)
          }else if ( nativeSupported ) {
            // 仅改变文本
            $input.attr(attr, opt.text)
            return
          }
 
          var width     = $input.width(), height = $input.height()
          var box_style = ['marginTop', 'marginLeft', 'paddingTop', 'paddingLeft', 'paddingRight']
 
          var show      = function () { $layer.show() }
          var hide      = function () { $layer.hide() }
          var is_empty  = function () { return !$input.val() }
          var check     = function () { is_empty() ? show() : hide() }
 
          var position  = function () {
            var pos = $input.position()
            if (!opt.hideOnFocus) {
              // 按??藏的情况，需要移?庸?肆较袼
              pos.left += 2
            }
            $layer.css(pos)
            $.each(box_style, function (i, name) {
              $layer.css(name, $input.css(name))
            })
          }
 
          var layer_style = {
              color     : 'gray',
              cursor    : 'text',
              textAlign : 'left',
              position  : 'absolute',
              fontSize  : $input.css('fontSize'),
              fontFamily: $input.css('fontFamily'),
              display   : is_empty() ? 'block' : 'none'
          }
 
          // create
          var layer_props = {
            text  : opt.text,
            width : width,
            height: 'auto'
          }
 
          // 确保只绑定一次
          var ns = '.' + opt.namespace, $layer = $input.data('layer' + ns)
          if (!$layer) {
            $input.data('layer' + ns, $layer = $('<div>', layer_props).appendTo($input.offsetParent()) )
          }
 
          // activate
          $layer
          .css($.extend(layer_style, opt.style))
          .unbind('click' + ns)
          .bind('click' + ns, function () {
            opt.hideOnFocus && hide()
            $input.focus()
          })
 
          $input
          .unbind(ns)
          .bind('blur' + ns, check)
 
          if (opt.hideOnFocus) {
            $input.bind('focus' + ns, hide)
          }else{
            $input.bind('keypress keydown' + ns, function(e) {
              var key = e.keyCode
              if (e.charCode || (key >= 65 && key <=90)) {
                hide()
              }
            })
            .bind('keyup' + ns,check)
          }
 
          // 由于 ie 记住密码的特性，需要监听值改变
          // ie9 不支持 jq bind 此事件
          $input.get(0).onpropertychange = check
 
          position()
          check()
        })
      }
 
    })(jQuery)

html部分：

 代码如下 复制代码

 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
    <title>HTML5 placeholder jQuery Plugin</title>
    <style>
         body, input, textarea { font: 1em/1.4 Helvetica, Arial; }
         label code { cursor: pointer; float: left; width: 150px; }
         input { width: 14em; }
         textarea { height: 5em; width: 20em; }
         .placeholder { color: #aaa; }
         .note { border: 1px solid orange; padding: 1em; background: #ffffe0; }   
    </style>
    </head>
    <body>
         <h1>HTML5 Placeholder jQuery Plugin</h1>    
         <form id="test">
         <p><label><code>type=search</code> <input type="search" name="search" placeholder="Search this site…" autofocus></label></p>
         <p><label><code>type=text</code> <input type="text" name="name" placeholder="e.g. John Doe"></label></p>
         <p><label><code>type=email</code> <input type="email" name="email" placeholder="e.g. address@example.ext"></label></p>
         <p><label><code>type=url</code> <input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/"></label></p>
         <p><label><code>type=tel</code> <input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88"></label></p>
         <p><label for="p"><code>type=password</code> </label><input type="password" name="password" placeholder="e.g. hunter2" id="p"></p>
         <p><label><code>textarea</code> <textarea name="message" placeholder="Your message goes here"></textarea></label></p>
         <p><input type="submit" value="type=submit"></p>
         </form>
         <script src="js/jquery-1.7.2.min.js"></script>    
         <script src="js/jquery.placeholder.zhihu.js"></script>
         <script>
              $(function(){              
                   var support = (function(input) {
                        return function(attr) { return attr in input }
                   })(document.createElement('input'))         
                   if ( !(support('placeholder') && $.browser.webkit) ) {              
                        $('input[placeholder],textarea[placeholder]').placeholder({
                             useNative: false, 
                             hideOnFocus: false, 
                             style: { 
                                  textShadow: 'none' 
                             } 
                        });
                   }
 
                   if ( !support('autofocus') ) {
                        $('input[autofocus]').focus()
                   }
              });
         </script>
    </body>
    </html>
时间： 2024-08-30 19:41:02

解决HTML5 placeholder的方案的相关文章

IE8 不支持html5 placeholder的解决方案

IE8不支持html5 placeholder的解决方法. /** * jQuery EnPlaceholder plug * version 1.0 2014.07.01戈志刚 * by Frans.Lee <dmon@foxmail.com> http://www.ifrans.cn */ (function ($) { $.fn.extend({ "iePlaceholder":function (options) { options = $.extend({ pla

Delphi xe4开发的软件, 出现各类型的报错, 求解决或查错方案.

问题描述 Delphi xe4开发的软件, 出现各类型的报错, 求解决或查错方案. 属于2次开发, 程序代码接手后. 在使用途中出现各种报错, 有各种内存报错, 或其他都是非常难重现的错误, 目前安装了EurekaLog, 但仍然无法定位, 会跳到一些莫明其妙的代码上. 程序属于比较大型的. 客户端是DELPHI开发, 服务端是C++开发, 客户端是单个EXE的结构, 带少量第3方的DLL. 更换过fastmm, 用过sharemem之类无效. 程序内部也有多个线程, 且有多个timer. 定位

解决html5中canvas绘制圆环进度条出现模糊效果方案

问题 近期用canvas绘制了圆环进度条,但是进度条出现周围模糊的现象,针对这种现象,网上搜了搜,有人提问,但是貌似没有很好的解决方案,针对这种情况,提出几种解决方案,仅供参考! 模糊效果如下: 解决方案 针对这种情况,我提出几种解决思路. 一.运用hidpi-canvas-polyfill 的js进行解决 HiDPI Canvas Polyfill 是针对设备提出的canvas高清解决方案,首先引入hidpi-canvas.js. 这个js会自动识别你的canvas,会把你的canvas变小,

跟我学习javascript解决异步编程异常方案_javascript技巧

一.JavaScript异步编程的两个核心难点 异步I/O.事件驱动使得单线程的JavaScript得以在不阻塞UI的情况下执行网络.文件访问功能,且使之在后端实现了较高的性能.然而异步风格也引来了一些麻烦,其中比较核心的问题是: 1.函数嵌套过深 JavaScript的异步调用基于回调函数,当多个异步事务多级依赖时,回调函数会形成多级的嵌套,代码变成 金字塔型结构.这不仅使得代码变难看难懂,更使得调试.重构的过程充满风险. 2.异常处理 回调嵌套不仅仅是使代码变得杂乱,也使得错误处理更复杂.这

jQuery实现HTML5 placeholder效果实例_jquery

你一定知道 HTML5新增的 placeholder 属性吧?不知道的也没关系.输入框有默认文本是,常需要这样一个效果,点击让默认文本消失,失去焦点后让默认文本显示. 今天分享一段jQuery代码,模拟 placeholder 效果. Javascript代码: 复制代码 代码如下: function placeHolder(event){   var self = $(this), selfDataValue = self.attr("data-value"), selfValue

Jquery命名冲突解决的五种方案分享_jquery

因为许多 JavaScript 库使用 $ 作为函数或变量名,jquery也一样.其实$只是jquery的一个别名而已,假如我们需要使用 jquery 之外的另一 js 库,我们可以通过调用 $.noConflict() 向该库返回控制权.下面是收集到解决这一问题的五种方案,总有一种你会用得上的. 例一: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

js模仿html5 placeholder适应于不支持的浏览器_javascript技巧

html5原生支持placeholder,对于不支持的浏览器(ie),可用js模拟实现. js代码 复制代码 代码如下: (function(){ //判断是否支持placeholder function isPlaceholer(){ var input = document.createElement('input'); return "placeholder" in input; } //不支持的代码 if(!isPlaceholer()){ //创建一个类 function P

利用IBM Worklight的移动混合功能来解决HTML5视频播放

本文将介绍如何利用 IBM® Worklight 的移动混合功能来解决这些问题并实现视频播放. 移动混合应用程序将原生的操作系统功能与 Web 技术相结合.通常,混合应用程序在一个嵌入式 Web 浏览器中呈现内容,该方法增强了跨平台功能,因为大部分代码都可使用 HTML5 技术编写,同时支持在必要时访问原生设备功能.IBM Worklight 是一个移动应用程序平台,支持开发跨平台混合应用程序,提供了在 Web 视图与原生视图之间导航的机制,还提供了一个可使混合应用程序更接近 "一次编写,随处运

XHTML+CSS兼容性解决的五个方案

  使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找. 1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别.所以在IE下其实解释成这样: div{maring:30px