javascript基础 label标签焦点转移 2017年1月26日
2017-01-26 22:46
246 查看
<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后面不能有括号 有括号那这本身就会被识别成函数
相关文章推荐
- 从零开始学_JavaScript_系列(五)——dojo(基础,动画移动,重力模拟,动画合并,添加标签)
- Javascript基础(四):获得焦点和失去焦点事件
- javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
- javascript 中自动转移焦点
- HTML+CSS基础课程之form表单中的label标签
- JavaScript网页里按回车时焦点的转移
- Javascript 中变更Html标签label的文本
- JavaScript循环使用label标签,以及break与continue
- HTML基础之label标签
- JavaScript基础 表单内的text文本输入框 获得焦点onfocus 失去焦点onblur
- javascript实现label标签跳出循环操作
- JavaScript基础 表单内的text文本输入框 获得焦点onfocus 失去焦点onblur
- javascript实现label标签跳出循环操作
- 如何在单击label标签时让文本框获得焦点?
- JavaScript基础插曲—获取标签,插入元素,操作样式
- javascript 中自动转移焦点
- JavaScript基础 onload的必要性 window.document.body.bgColor代码写在了body标签的前面
- javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
- JavaScript基础插曲—获取标签,插入元素,操作样式