兼容其他不支持placeholder的浏览器(超强的让IE下支持placeholder的属性插件)

最新推荐文章于 2024-11-05 16:48:59 发布

转载最新推荐文章于 2024-11-05 16:48:59 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qixixiaoyu/p/7703698.html

本文介绍了一种在不支持HTML5 placeholder属性的浏览器中实现该功能的方法。通过JavaScript，为输入框和文本区域动态创建span元素作为提示信息，当输入框获得焦点或有值时隐藏提示，失去焦点且为空时显示提示。

html5为元素添加了新属性placeholder。
这是一个很常用的功能：把提示放在输入框里；onfocus时提示消息；onblur时如果已有值，则不再提示，如果没值，保留提示。
QWrap的Valid组件里，提供了这个功能。不过Valid的功能太多，有使用成本。
这里，把跟placeholder的功能独立出来，可以无依赖的使用。
代码如下：

    
   

    <
    html
    >
     
    <
    head
    >
     
    <
    meta 
    http-equiv
    ="Content-Type"
     content
    ="text/html; charset=GB2312"
    >
     
    <
    title
    >
    验证Valid ----placeholder
    </
    title
    >
     
    <
    meta 
    http-equiv
    ="Content-Type"
     content
    ="text/html; charset=gb2312"
     
    />
     
    <
    style
    >
     span.emptyhint 
    {
    color
    :
    #999
    ;
    position
    :
    absolute
    ;
    padding
    :
    3px
    ;
    }
     
    </
    style
    >
     
    </
    head
    >
     
    <
    body
    >
     
    <
    div 
    id
    =doc3
    >
     
    <
    div 
    id
    ="bd"
     
    >
     
    <
    div 
    class
    ="section-ctn"
    >
     
    <
    ul
    >
     
    <
    li
    >
     
    <
    label 
    class
    ="k"
    >
    订单主人：
    </
    label
    >
     
    <
    input 
    type
    ="text"
     placeholder
    ="请填写订单主人"
     value
    ="JK"
    >
     
    </
    li
    >
     
    <
    li
    >
     
    <
    label 
    class
    ="k"
    >
    订单号：
    </
    label
    >
     
    <
    input 
    type
    ="text"
     placeholder
    ="请填写订单号"
    >
     
    </
    li
    >
     
    <
    li
    >
     
    <
    label 
    class
    ="k"
    >
    备注：
    </
    label
    >
     
    <
    textarea 
    type
    ="text"
     placeholder
    ="请填写备注"
    ></
    textarea
    >
     
    </
    li
    >
     
    </
    ul
    >
     
    </
    div
    >
     
    </
    div
    >
     
    <
    div 
    id
    ="ft"
    >
     部分内容来自 qwrap wagang组件Valid: (
    <
    a 
    href
    ="http://dev.qwrap.com/resource/js/wagang/_index.html"
    >
    http://dev.qwrap.com/resource/js/wagang/_index.html
    </
    a
    >
    ) 
    </
    div
    >
     
    <
    div 
    id
    ="ft"
    >
     QWrap网址： 
    <
    a 
    href
    ="http://www.qwrap.com"
    >
    www.qwrap.com
    </
    a
    >
     
    </
    div
    >
     
    </
    div
    >
     
    </
    body
    >
     
    <
    script
    >
     
    function
     initPlaceHolders(){ 
    if
    (
    '
    placeholder
    '
     
    in
     document.createElement(
    '
    input
    '
    )){ 
    //
    如果浏览器原生支持placeholder
     
     
    return
     ; } 
    function
     target (e){ 
    var
     e
    =
    e
    ||
    window.event; 
    return
     e.target
    ||
    e.srcElement; }; 
    function
     _getEmptyHintEl(el){ 
    var
     hintEl
    =
    el.hintEl; 
    return
     hintEl 
    &&
     g(hintEl); }; 
    function
     blurFn(e){ 
    var
     el
    =
    target(e); 
    if
    (
    !
    el 
    ||
     el.tagName 
    !=
    '
    INPUT
    '
     
    &&
     el.tagName 
    !=
    '
    TEXTAREA
    '
    ) 
    return
    ;
    //
    IE下，onfocusin会在div等元素触发 
     
     
    var
     emptyHintEl
    =
    el.__emptyHintEl; 
    if
    (emptyHintEl){ 
    //
    clearTimeout(el.__placeholderTimer||0);
     
     
    //
    el.__placeholderTimer=setTimeout(function(){//在360浏览器下，autocomplete会先blur再change
     
     
    if
    (el.value) emptyHintEl.style.display
    =
    '
    none
    '
    ; 
    else
     emptyHintEl.style.display
    =
    ''
    ; 
    //
    },600);
     
     } }; 
    function
     focusFn(e){ 
    var
     el
    =
    target(e); 
    if
    (
    !
    el 
    ||
     el.tagName 
    !=
    '
    INPUT
    '
     
    &&
     el.tagName 
    !=
    '
    TEXTAREA
    '
    ) 
    return
    ;
    //
    IE下，onfocusin会在div等元素触发 
     
     
    var
     emptyHintEl
    =
    el.__emptyHintEl; 
    if
    (emptyHintEl){ 
    //
    clearTimeout(el.__placeholderTimer||0);
     
     emptyHintEl.style.display
    =
    '
    none
    '
    ; } }; 
    if
    (document.addEventListener){
    //
    ie
     
     document.addEventListener(
    '
    focus
    '
    ,focusFn, 
    true
    ); document.addEventListener(
    '
    blur
    '
    , blurFn, 
    true
    ); } 
    else
    { document.attachEvent(
    '
    onfocusin
    '
    ,focusFn); document.attachEvent(
    '
    onfocusout
    '
    ,blurFn); } 
    var
     elss
    =
    [document.getElementsByTagName(
    '
    input
    '
    ),document.getElementsByTagName(
    '
    textarea
    '
    )]; 
    for
    (
    var
     n
    =
    0
    ;n
    <
    2
    ;n
    ++
    ){ 
    var
     els
    =
    elss[n]; 
    for
    (
    var
     i 
    =
    0
    ;i
    <
    els.length;i
    ++
    ){ 
    var
     el
    =
    els[i]; 
    var
     placeholder
    =
    el.getAttribute(
    '
    placeholder
    '
    ), emptyHintEl
    =
    el.__emptyHintEl; 
    if
    (placeholder 
    &&
     
    !
    emptyHintEl){ emptyHintEl
    =
    document.createElement(
    '
    span
    '
    ); emptyHintEl.innerHTML
    =
    placeholder; emptyHintEl.className
    =
    '
    emptyhint
    '
    ; emptyHintEl.onclick
    =
    function
     (el){
    return
     
    function
    (){
    try
    {el.focus();}
    catch
    (ex){}}}(el); 
    if
    (el.value) emptyHintEl.style.display
    =
    '
    none
    '
    ; el.parentNode.insertBefore(emptyHintEl,el); el.__emptyHintEl
    =
    emptyHintEl; } } } } initPlaceHolders(); 
    </
    script
    >
     
    </
    html
    >
   

转载于:https://www.cnblogs.com/qixixiaoyu/p/7703698.html