js/jquery实现回车键切换输入框焦点代码

下面来个例子:

 代码如下 复制代码

<script type="text/javascript">
function handleEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ?
event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}
</script>

这样来使用上面的Js代码:

 代码如下 复制代码

<form>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<textarea onkeypress="return handleEnter(this, event)">回车切换焦点</textarea>
</form>

jquery例子

实现步骤如下

1、首先引用Jquery类库

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

2、Javascript代码

 代码如下 复制代码

<script type="text/javascript">
        $(function () {
        $('input:text:first').focus();
        var $inp = $('input:text');
        $inp.bind('keydown', function (e) {
            var key = e.which;
            if (key == 13) {
                e.preventDefault();
                var nxtIdx = $inp.index(this) + 1;
                $(":input:text:eq(" + nxtIdx + ")").focus();
            }
        });
    });
    </script>

分析:

$('input:text:first').focus();
 

页面初始化时,焦点定位第一个文本框内

var $inp = $('input:text');
  

取的type=文本框的元素集合

$inp.bind('keydown', function (e) {}
 

给文本框集合绑定'keydown'事件

var key = e.which;
       

取的当前按下的键值 比如Enter的键值=13

e.preventDefault();

时间: 2024-09-26 03:00:37

js/jquery实现回车键切换输入框焦点代码的相关文章

JS实现方向键切换输入框焦点的方法_javascript技巧

本文实例讲述了JS实现方向键切换输入框焦点的方法.分享给大家供大家参考.具体如下: 这里实现js方向键控制切换输入框焦点效果,不过无法兼容Firefox.当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内,无需点击鼠标,对于经常录入数据的时候,这种功能可提高输入速度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

在VC++中用回车键切换输入焦点

Windows程序中Tab键是默认的切换输入焦点的按键,但用回车键切换输入焦点更符合人们的输入习惯.Delphi.VB中这个问题比较容易解决,VC++中却很少有资料提到.通过反复尝试,我找到了一种方法,或许对大家有所帮助. 1.VC++中appwizard生成一个基于对话框的程序.切换resourseview状态,在对话框中插入一个编辑框,同时修改其styles属性,选中multiline .want return两项. 2.①在classwizard中选add class增加一个新类,name

js/jquery获取文本框输入焦点的方法

 本篇文章主要是对js/jquery获取文本框输入焦点的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一.    代码如下:  function CheckForm() {              if(document.form1.trainingName.value==""){                      alert("培训班名称不能为空!");                      document.form1.trai

js jquery做的图片连续滚动代码_jquery

核心代码如下,大家可以参考 复制代码 代码如下: <script src="/js/jquery.js"></script>  <script>  $(document).ready(function(){         $(".bannerbutton li").each(                       function(){                              $(this).click(

通过上下左右键和回车键切换光标实现代码_jquery

做项目时,客户提出这样一个要求,在列表中的文本框里输入数据时,要能够通过上下左右键来切换光标,按回车键就把光标移到下一个文本框.这样就省得一直去用鼠标了,操作起来更方便. 不废话,上代码. 复制代码 代码如下: <asp:GridView id="gdv" runat="server" AllowPaging="True" PageSize="50" AutoGenerateColumns="False&quo

在js(jquery)中获得文本框焦点和失去焦点的方法_javascript技巧

先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号')

jquery清空textarea等输入框实现代码_jquery

完整示例:http://www.keleyi.com/keleyi/phtml/clearinput.htm 下面是源代码: 复制代码 代码如下: <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> <textarea id="keleyi_com" cols=&q

js/jquery去掉空格,回车,换行示例代码_jquery

Jquery:$("#accuracy").val($("#accuracy").val().replace(/\ +/g,""));//去掉空格 .replace(/\ +/g,"") //去掉空格方法$("#content").val($("#content").val().replace(/[ ]/g,""));    //去掉空格 .replace(/[ ]/

js/jquery获取文本框输入焦点的方法_javascript技巧

方法一. 复制代码 代码如下:  function CheckForm() {             if(document.form1.trainingName.value==""){                     alert("培训班名称不能为空!");                     document.form1.trainingName.focus();                     return false;