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段代码。

  • 相关阅读:
    跨域和表单重复
    Socket
    Redis(基本数据类型和使用Java操作Redis)
    初识Git
    SpringCloud一(eureka)
    SpringBoot3(springboot_jdbctemplate以及MyBatis和Dubbo整合)
    SpringBoot2(thymeleaf模板jsp页面和jpa)
    SpringBoot
    SpringBoot小型进销存系统
    MyBatis与SpringBoot整合案例
  • 原文地址:https://www.cnblogs.com/book2006/p/5198714.html
Copyright © 2011-2022 走看看