茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

    <s id="ddbnn"></s>
  • <sub id="ddbnn"><ol id="ddbnn"></ol></sub>

  • <legend id="ddbnn"></legend><s id="ddbnn"></s>

    關(guān)于HTML5 Placeholder新標簽低版本瀏覽器下不兼容的問題分析及解決辦法
    來源:易賢網(wǎng) 閱讀:1314 次 日期:2016-07-09 09:56:53
    溫馨提示:易賢網(wǎng)小編為您整理了“關(guān)于HTML5 Placeholder新標簽低版本瀏覽器下不兼容的問題分析及解決辦法”,方便廣大網(wǎng)友查閱!

    placeholder 屬性是 HTML5 中的新屬性,俗名叫“占位符”,功能類似于輸入框在得到焦點時,時面的默認值會變成空白,當失去焦點時又會顯示默認的文本,我想大家一定使用 js/jquery制作過這樣的效果。目前只有在Mozilla Firefox 3.7+、Apple Safari 4+、Google Chrome 4+、Opera11+等現(xiàn)代瀏覽器支持。”

    placeholder屬性是HTML5 中為input添加的。在input上提供一個占位符,文字形式展示輸入字段預(yù)期值的提示信息(hint),該字段會在輸入為空時顯示。

    實例:

    代碼如下:

    <input type="text" name="userName" placeholder="請輸入用戶名">

    placeholder操作起來非常方便,提高了開發(fā)效率,同時在高版本瀏覽器中用戶體驗也很好,所以本人很喜歡用這個屬性。

    然而,在IE9以下版本瀏覽器就失效了,并且IE10+支持placeholder屬性,它的表現(xiàn)與其它瀏覽器也不一致

    •IE10+里鼠標點擊時(獲取焦點)placeholder文本消失

    •Firefox/Chrome/Safari點擊不消失,而是鍵盤輸入時文本消失

    那么作為一名開發(fā)人員,是否應(yīng)該去克服解決這個問題呢。目前網(wǎng)上也一堆類似解決方案,大致實現(xiàn)思路分為兩種:

    1.(方式一)使用input的value作為顯示文本,模擬灰色樣式,focus讓$("[placeholder]").val()=="",blur時$("[placeholder]").val(this.defaultValue);

    2.(方式二)不使用value,添加一個額外的標簽(span)到body里然后絕對定位覆蓋到input上面。

    在這里因第一種方式實現(xiàn)起來,占用了value且驗證時需要做額外的判斷,那么個人建議使用第二種方式。

    首先,判斷當前瀏覽器是否支持placeholder屬性:

    代碼如下:

    function placeholderSupport() {

    return 'placeholder' in document.createElement('input');

    }

    上關(guān)鍵代碼:

    代碼如下:

    /*

    *placeholder兼容ie9以下 author:高豐鳴 add 2016-1-27

    */

    $(function(){

    if(!placeholderSupport()){ // 判斷瀏覽器是否支持 placeholder

    $(document).ready(function(){

    //默認遍歷循環(huán)添加placeholder

    $('[placeholder]').each(function(){

    $(this).parent().append("<span class='placeholder'>"+$(this).attr('placeholder')+"</span>");

    })

    $('[placeholder]').blur(function(){

    if($(this).val()!=""){ //如果當前值不為空,隱藏placeholder

    $(this).parent().find('span.placeholder').hide();

    }

    else{

    $(this).parent().find('span.placeholder').show();

    }

    })

    });

    }

    });

    以上內(nèi)容給大家介紹了關(guān)于HTML5 Placeholder新標簽低版本瀏覽器下不兼容的問題分析及解決辦法 的相關(guān)內(nèi)容,希望對大家有所幫助。

    更多信息請查看網(wǎng)頁制作
    由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>

    2026國考·省考課程試聽報名

    • 報班類型
    • 姓名
    • 手機號
    • 驗證碼
    關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
    工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
    聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
    咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)