`
cherryQQ
  • 浏览: 1141151 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

js 使文本框的焦点移动

阅读更多
我前段时间看了MS的ASP.NET讲座,在里面谈到了如何让"回车键"使文本框的焦点一个个下移.其中提了三种方法,最好的一种是这样的:

用客户端脚本在页面添加document的onkeydown事件,让页面在接受到回车事件后,进行Tab键的功能,即只要把event的keyCode由13变为9

VBScript代码:

<script language="vbscript">

sub document_onkeydown

if event.keyCode=13 then

event.keyCode=9

end if

end sub

</script>

Javascript代码如下:

<script language="javascript" for="document" event="onkeydown">

<!--

if(event.keyCode==13)

event.keyCode=9;

-->

</script>

这样的处理方式,可以实现焦点往下移动,但对于按钮也起同样的作用,一般的客户在输入完资料以后,跳到按钮后,最好能直接按"回车"进行数据的提交.因此,对上面的方法要进行一下修改,应该对于"提交"按钮不进行焦点转移.而直接激活提交.


因此我对上面的代码进行了一个修改,即判断事件的"源",是否为提交按钮,代码如下:

<script language="javascript" for="document" event="onkeydown">

<!--

if(event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event.srcElement.type!='textarea' && event.srcElement.type!='')

event.keyCode=9;

-->

</script>

判断是否为button, 是因为在HTML上会有type="button"

判断是否为submit,是因为HTML上会有type="submit"

判断是否为reset,是因为HTML上的"重置"应该要被执行

判断是否为空,是因为对于HTML上的"<a>链接"也应该被执行,这种情况发生的情况不多,可以使用"tabindex=-1"的方式来取消链接获得焦点.

分享到:
评论

相关推荐

    js实现文本框中焦点在最后位置

    }这样当哪一项输入框为空是就将焦点移动那一项输入框..这项功能使用起来非常方便..但是存在一个小小的问题… 那就是obj.focus()将焦点移动到输入框后,会将文字光标(就是一闪一闪的竖线)移动到这个输入框的第一个字符...

    多个文本框 按左右键自动移动

    开发者可以参考这个文件来学习或理解如何构建这样的文本框焦点移动功能。 总的来说,这个话题涉及到了用户界面设计、键盘事件监听、数组操作以及边界处理等多个编程和交互设计的方面,是一个实用且具有挑战性的编程...

    js实现鼠标点击文本框自动选中内容的方法

    标题中提及的"js实现鼠标点击文本框自动选中内容的方法"主要涉及到的是JavaScript编程语言中的两个概念:鼠标点击事件(onClick)和文本选择事件(select)。在Web开发中,页面上的文本框(input type="text")或者...

    js达到文本框的最大长度时跳到下一个文本框

    根据给定文件的信息,本文将详细探讨如何使用JavaScript在用户输入达到某个文本框的最大长度时自动跳转到下一个文本框的技术实现。 ### 技术背景 在Web开发中,经常需要处理用户输入的情况,比如在表单中设置多个...

    用Enter键控制多个文本框获取焦点

    这个功能使得用户无需使用鼠标,只需按下键盘上的Enter键,就能将焦点从一个文本框移动到下一个文本框,从而提高数据录入的效率。 实现这一功能主要涉及前端开发技术,尤其是JavaScript,它是一种广泛用于网页动态...

    文本框取鼠标事件文本框取鼠标事件

    - **onfocus 事件处理**:当文本框获得焦点时,如果文本框的值等于预设值(例如:“ƾ֤:”),则将文本框清空,以便用户可以输入内容。 - **onblur 事件处理**:当文本框失去焦点时,检查文本框是否为空;如果是...

    文本框聚焦提示文字消失失,去焦点显示提示文字

    这种提示文字通常会在文本框为空或者未被聚焦时显示,一旦用户开始输入或文本框获得焦点,提示文字就会消失。本篇将详细讨论如何实现“文本框聚焦提示文字消失,失去焦点显示提示文字”的功能。 首先,我们要理解这...

    js+css_聚焦文本框显示可拖动日历

    通过监听文本框焦点、创建可拖动的日历以及利用CSS美化界面,这种设计可以显著提高网站的用户体验。开发者在实现这一功能时需要考虑各种细节,如拖动逻辑、样式设计、无障碍性以及与其他页面元素的互动。

    文本框默认提示文字

    在这个例子中,“请输入标题搜索”就是`placeholder`属性的值,它会在文本框未获得焦点时显示,一旦用户开始输入或者聚焦到文本框,提示文字就会自动消失。 CSS则可以用来定制提示文字的样式,例如颜色、字体大小等...

    js常用100例方法 正则 移动设备判断 金额转换等 页面resize 超实用

    23、原生JavaScript光标停在文字的后面,文本框获得焦点时调用 24、原生JavaScript检验URL链接是否有效 28、原生JavaScript IP转成整型 29、原生JavaScript整型解析为IP地址 31、原生JavaScript判断是否移动设备 32...

    javascript自动切换焦点控制效果完整实例

    焦点切换则是指在不同的表单输入框之间移动光标,以便于用户输入信息。自动切换焦点通常通过监听键盘事件(如键盘按键按下事件)来实现,当用户在完成一个输入框的填写后,焦点自动切换到下一个输入框,从而提高数据...

    CSS3文本框动画输入标签效果.zip

    在"CSS3文本框动画输入标签效果"中,jQuery用于监听用户对输入框的交互,比如鼠标点击或获得焦点,然后触发相应的CSS3动画。 具体实现过程如下: 1. **初始状态**:输入框的上方显示一个标签文本,例如"用户名",...

    JavaScript监听文本框回车事件并过滤文本框空格的方法

    在示例中,如果回车键被按下,页面的焦点将被移动到ID为`aLogin`的链接元素上,这意味着回车键的默认行为被取消,防止了页面的不必要刷新。 为了防止回车键被按下时触发表单的默认提交行为,示例中还提供了一个技巧...

    鼠标焦点离开文本框时验证的js代码

    当用户在文本框中输入内容后,将焦点移动到文本框外的其他位置时,就会激发此事件。在示例代码中,为每个文本输入框的onblur属性设置了相同的事件处理函数名onblus(),不过正确的函数名应该是onblur(),可能是由于...

    javascript设置文本框光标的方法实例小结

    这个函数接收文本框的ID和目标位置作为参数,创建一个文本范围,使其折叠到起始位置,然后移动开始位置到指定字符数,最后选中这个范围,即设置了光标位置。 这些函数在JavaScript中非常实用,特别是在需要在用户...

    js移动焦点到最后位置的简单方法

    总结来说,JavaScript提供了多种方法来移动输入框或可编辑元素的焦点。对于IE,我们使用`createTextRange`和`collapse`;对于标准浏览器,使用`setSelectionRange`;对于非原生可编辑元素,使用`window.getSelection...

    将鼠标焦点定位到文本框最后(代码分享)

    // 定义一个便捷方法,直接将焦点移动到文本框末尾 $.fn.focusEnd = function () { if (this.val() != undefined) { this.setCursorPosition(this.val().length); } }; ``` 这段代码首先定义了两个jQuery插件...

    JavaScript文本框脚本编写的注意事项

    在JavaScript中编写涉及文本框的脚本时,需要注意多种细节以确保良好的用户体验和功能完备性。文本框在HTML中主要通过`&lt;input&gt;`和`&lt;textarea&gt;`两种元素进行定义。对于`&lt;input&gt;`,通常使用`type="text"`来创建单行...

    JS日期选择器(适用于文本框输入日期)

    上述代码中,我们使用了'focus'事件来监听文本框何时获得焦点。当用户点击文本框时,我们将触发日期选择器的显示。其他常见的事件,如'change'(值改变)、'click'(点击)等,也可以根据需求进行绑定。 核心知识点...

Global site tag (gtag.js) - Google Analytics