这篇文章主要介绍了 javascript 自动切换焦点控制效果的方法, 结合完整实例形式分析了 JavaScript 响应键盘按键控制表单输入框的焦点切换功能, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 javascript 自动切换焦点控制的方法。分享给大家供大家参考,具体如下:
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <html>
- <head>
- <script type="text/javascript" src="jquery-1.7.2.min.js">
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- var EventUtil = {
- addHandler: function(element, type, handler) {
- if (element.addEventListener) {
- element.addEventListener(type, handler, false);
- } else if (element.attachEvent) {
- element.attachEvent("on" + type, handler);
- } else {
- element["on" + type] = null;
- }
- },
- removeHandle: function(element, type, handler) {
- if (element.removeEventListener) {
- element.removeEventListener(type, handler, false);
- } else if (element.detachEvent) {
- element.detachEvent("on" + type, handler);
- }
- },
- getEvent: function(event) {
- return event ? event: window.event;
- },
- getTarget: function(event) {
- return event.target || event.srcElement;
- },
- preventDefault: function(event) {
- if (event.preventDefault) {
- event.preventDefault();
- } else {
- event.returnValue = false;
- }
- },
- stopPropagation: function(event) {
- if (event.stopPropagation) {
- event.stopPropagation();
- } else {
- event.cancelBubble = true;
- }
- }
- };
- var dom_text1 = document.getElementById("text1");
- var dom_text2 = document.getElementById("text2");
- var dom_text3 = document.getElementById("text3");
- function switchFocus(event) {
- event = EventUtil.getEvent(event);
- var target = EventUtil.getTarget(event);
- if (target.value.length == target.maxLength) {
- var form = target.form;
- for (var i = 0; i < form.elements.length; i++) {
- if (form.elements[i] == target) {
- form.elements[i + 1].focus();
- return;
- }
- }
- }
- }
- EventUtil.addHandler(dom_text1, "keyup", switchFocus);
- EventUtil.addHandler(dom_text2, "keyup", switchFocus);
- EventUtil.addHandler(dom_text3, "keyup", switchFocus);
- })
- </script>
- </head>
- <body>
- <form id="form1">
- <input type="text" maxlength="3" id="text1" />
- <input type="text" maxlength="3" id="text2" />
- <input type="text" maxlength="3" id="text3" />
- </br>
- <input type="text" />
- </form>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0222/267240.html