zoukankan      html  css  js  c++  java
  • 《超实用的HTML代码段》阅读笔记1——HTML5自动聚焦

    在页面加载完成后自动将输入焦点定位到需要的元素,用户就可以直接在改元素中进行输入而不需要手动选择它。

    通过autofocus的属性就可以指定这种自动聚焦的功能,示例代码如下:

    <form name="input" action="html_form_action.php" method="post">
        <div class="login-item">
            <label for="nick">姓名:<input autofocus id="nick" name="nick"/></label>
        </div>
        <div class="login-item">
            <label for="password">密码:<input id="password" name="password"/></label>
        </div>
        <div class="login-submit">
            <button type="submit">提交</button>
        </div>
    </form>
    

      

    当autofocus属性设置以后,input、textarea以及button元素在页面加载(load)完成之后,会被自动选中(即获得焦点)。如果尝试其他元素非表单元素(如h2元素),tabIndex=0的情况,但是autofocus属性在这些元素上没有效果。

    这个属性在主要目的是获取用户输入的页面是很有用的,例如搜索首页(图10.2),主要用于引导用户进行搜索,并且可以不是额外脚本实现。

     

    图10.2  自动聚焦

    autofocus属性只能用于设置一个元素上,如果多个元素都设置了autofocus属性,那么将会是最后一个元素获取了焦点。

    <input autofocus="autofocus" /> 
    <button autofocus="autofocus">Hi!</button> 
    <textarea autofocus="autofocus"></textarea>
    

      摘自《超实用的HTML代码段》,涵盖HTML和HTML 5的400段代码。

  • 相关阅读:
    递归 深拷贝
    js 基础复习(0)
    js数组冒泡排序,快速排序的原理以及实现
    .sass 和 .scss 区别
    ionic2-从搭建环境说起
    Unity3d截图保存到Android相册的实现
    总是要总结一年的工作(写给自己和想要从技术创业开公司的朋友们)
    初入职场(插曲-如何更称职的工作)
    初入职场(插曲-你的成长代价)
    初入职场(面试)
  • 原文地址:https://www.cnblogs.com/book2006/p/5198714.html
Copyright © 2011-2022 走看看