您的位置:澳门402永利com > 计算机 网络 > 消失殆尽提醒

消失殆尽提醒

发布时间:2019-11-26 14:30编辑:计算机 网络浏览(200)

    点评:浏览器引进了众多的HTML5 性格在这之中作者最心爱的叁个正是为input元素引进了placeholder属性,placeholder属性呈现携带性文字直到输入框获取输入主题,当有了客户输入内容后引导性内容将会自动隐蔽

    复制代码 代码如下:

    最初的稿件地址:HTML5′s placeholder Attribute
    示范地址: placeholder演示
    原版的书文日期: 2008年06月09日
    翻译日期: 二〇一三年11月6日
    浏览器引进了成都百货上千的HTML5 个性: 有个别是依靠HTML的,某些是JavaScript APIs格局的,但都很有用。在这之中小编最欣赏的四个正是为input成分引进了placeholder属性。
    placeholder属性展现带领性文字直到输入框获取输入核心,当有了顾客输入内容后带领性内容将会自动掩盖。你势必见过用JavaScript完成的这种技能数不清次了,然则来自HTML5的原生扶植通常的话会越来越好一些。
    HTML 代码 如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html xmlns=";
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文书档案</title>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">

    代码如下:

    //第后生可畏种方式 $(document).ready(function(){
        var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(input){var text=input.getAttribute('placeholder'),defaultValue=input.defaultValue;
        if(defaultValue==''){
            input.value=text}
            input.onfocus=function(){
                if(input.value===text){this.value=''}};
                input.onblur=function(){if(input.value===''){this.value=text}}};
                if(!supportPlaceholder){
                    for(var i=0,len=inputs.length;i<len;i++){var input=inputs[i],text=input.getAttribute('placeholder');
                    if(input.type==='text'&&text){placeholder(input)}}}});

    <input type="text" name="address" placeholder="请输入常住地址...">

    //第二种办法
    $(function(){
    if(!placeholderSupport()){   // 剖断浏览器是不是帮衬 placeholder
        $('[placeholder]').focus(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function() {
            var input = $(this);
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
            }
        }).blur();
    };
    })
    function placeholderSupport() {
        return 'placeholder' in document.createElement('input');
    }
    </script>

    您要做的黄金时代味是增加四个placeholder属性域,以致部分带领性的文字内容,不必要额外的JavaScript脚本来达成这种效果,是否以为很棒?
    测量试验 placeholder 的支撑度
    (注意这是二零零六年的篇章,到现行反革命,2012年,主流浏览器应该都援救了.)
    既然如此 placeholder 是叁个新的意义,那么测验浏览器的扶持是很有供给的。JS代码如下:

    </head>
    <body>
    <form>
      <label for="name">用户名:</label>
      <input type="text" placeholder="请输入客户名"/>
    </form>
    </body>
    </html>

    代码如下:

    你或然感兴趣的小说:

    • js包容的placeholder属性详细明白
    • js模仿html5 placeholder适应于不帮助的浏览器
    • javascript 文本框水印/占位符(watermark/placeholder)实现方式
    • 让低版本浏览器补助input的placeholder属性(js方法)
    • 两种方法基于jQuery完毕IE浏览器宽容placeholder效果
    • IE下协助文本框和密码框placeholder效果的JQuery插件分享
    • 依据jQuery的让非HTML5浏览器帮忙placeholder属性的代码
    • jQuery实现的placeholder效果完整实例
    • jQuery达成的一个自定义Placeholder属性插件
    • jQuery插件EnPlaceholder完成输入框提示文字
    • 听他们讲JS实现html中placeholder属性提醒文字效果示例

    // 在JS中开创叁个input成分,并认清成分有没有四个称呼placeholder的习性
    // 假使浏览器援助的话,那么在js里面引用的DOM就能存在这里个性子
    function hasPlaceholderSupport() {
    var input = document.createElement('input');
    return ('placeholder' in input);
    }

    而只要浏览器不扶植placeholder特性,这您就必要八个fallback攻略来拍卖,例如MooTools,Dojo,或许别的JavaScript工具。(今后dojo能够用的少了,国内越来越多的是jQuery和ExtJS。)

    代码如下:

    /* jQuery 代码,当然,记得引进jQuery的库哦*/
    $(function(){
    if(!hasPlaceholderSupport()){
    // 获取address元素
    var $address = $("input[name='address']");
    placeholder = $address.attr("placeholder");
    // 绑定 focus事件
    $address.bind('focus',function(){
    if(placeholder == $address.val()){
    $address.val('');
    }
    });
    // 失去主旨事件
    $address.bind('blur',function(){
    if('' == $address.val()){
    $address.val(placeholder);
    }
    });
    }
    });

    placeholder 是浏览器另三个受人尊敬的人的叠加属性用于代替js片段,你依然足以编写制定HTML5的placeholder样式.
    万事代码如下:

    代码如下:

    <!DOCTYPE HTML>
    <html>
    <head>
    <title> HTML5 placeholder属性演示 </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="[email protected]">
    <meta name="Description" content="original=;
    <script src=";
    <script>
    // 在JS中成立叁个input成分,并推断成分有未有二个称得上placeholder的性质
    // 要是浏览器帮衬的话,那么在js里面援引的DOM就能存在这里个性子
    function hasPlaceholderSupport() {
    var input = document.createElement('input');
    return ('placeholder' in input);
    }
    /* jQuery 代码,当然,记得引进jQuery的库哦*/
    $(function(){
    if(!hasPlaceholderSupport()){
    // 获取address元素
    var $address = $("input[name='address']");
    placeholder = $address.attr("placeholder");
    // 绑定 focus事件
    $address.bind('focus',function(){
    if(placeholder == $address.val()){
    $address.val('');
    }
    });
    // 失去宗旨事件
    $address.bind('blur',function(){
    if('' == $address.val()){
    $address.val(placeholder);
    }
    });
    }
    });
    </script>
    </head>
    <body>
    <div>
    <form method="post" action="">
    <input type="text" name="address" placeholder="请输入常住地址...">
    <input type="submit" value="测试">
    </form>
    </div>
    </body>
    </html>

    本文由澳门402永利com发布于计算机 网络,转载请注明出处:消失殆尽提醒

    关键词:

上一篇:canvas基本绘图之绘制线段

下一篇:没有了