javascript基础 label标签焦点转移 2017年1月26日

来源：互联网发布：淘宝宝贝涨价被降权了编辑：程序博客网时间：2024/05/22 20:40

<article>    <h1>Contact the band</h1>    <form method="post" action="submit.html">        <fieldset>            <p>                <label for="name">Name:</label>                <input type="text" id="name" name="name" placeholder="Your name" required="required" />            </p>            <p>                <label for="email">Email:</label>                <input type="email" id="email" name="email" placeholder="Your email address" required="required" />            </p>            <p>                <label for="message">Message:</label>                <textarea cols="45" rows="7" id="message" name="message" required="required" placeholder="Write your message here."></textarea>            </p>            <input type="submit" value="Send" />        </fieldset>    </form></article>

首先我们先用form包裹表单用fieldset分组表单然后给每个表单项用label和input来实际生成这里的label有个for属性他指向了某个name为同名的表单项假设你点击这个label 那么会自动给这个label指向的表单项获得焦点
但是这种方法并不是所有浏览器都支持我们完全可以自己去写一个js方法达到这种效果

function getFocus() {    if(!document.getElementsByTagName) return false;    var label = document.getElementsByTagName("label");    if(label.length == 0) return false;    for(var i=0 ; i<label.length ; i++){        if(!label[i].getAttribute("for")) continue;        label[i].onclick = function () {            var for_name = this.getAttribute("for");            if(!document.getElementById(for_name)) return false;            var for_elem = document.getElementById(for_name);            for_elem.focus();         }    }}

要注意的地方能用this调用的东西就在 onclick函数里面就可以不要在外面声明因为带不进去里面无法调用如果必须在外围声明则需要用.属性的方法带进去另外oncilck后面不能有括号有括号那这本身就会被识别成函数

0 0