`

javascript使用方向键控制光标在table单元格的输入框的中跳动

阅读更多
<html>
<head>
<script type="text/javascript">
//索引,全局变量
var text_ind;
function of(text_index){
text_ind = text_index;
}

function okd(text_value){
var code_value = event.keyCode;
var next_name;
var flag = false;

var rng = document.selection.createRange();
rng.moveStart("character",-document.getElementById("t"+text_ind).value.length);
var gb_index = rng.text.length;

//判断按键是否为 -->
if(code_value==39){
  //如果光标所在位置不是最后一个文本框,
  //当光标不是最后一个且光标是在文本值最后时发生
if(text_ind!=8 && gb_index==3){
flag = true;
next_name = "t"+(text_ind+1);
}
}

//判断按键是否为 <--、
//当光标不是最后一个且光标是在文本值最前时发生
if(code_value==37){
if(text_ind !=0 && gb_index==0){
flag = true;
next_name = "t"+(text_ind-1);
}
}

//判断按键是否为 向上键
if(code_value==38){
//如果光标所在位置不是在第一行!
if(text_ind!=0 && text_ind!=1 && text_ind!=2){
flag = true;
next_name = "t"+(text_ind-3);
}
}

//判断按键是否为 向下键
if(code_value==40){
if(text_ind!=6 && text_ind!=7 && text_ind!=8){
flag = true;
next_name = "t"+(text_ind+3);
}
}
if(flag){
document.getElementById(next_name).focus();
}
}
</script>
</head>
<body>
<table align="center" width="100" height="50">
<!-- 下面的函数of()中传递的是索引(第几个文本框);函数okd()中传递的是text的值 -->
<tr>
<td> <input type="text" value="111" id="t0" onfocus="of(0)" onkeyup="okd('111')"/> </td>
<td> <input type="text" value="222" id="t1" onfocus="of(1)" onkeyup="okd('222')"/> </td>
<td> <input type="text" value="333" id="t2" onfocus="of(2)" onkeyup="okd('333')"/> </td>
</tr>
<tr>
<td> <input type="text" value="444" id="t3" onfocus="of(3)" onkeyup="okd('444')"/> </td>
<td> <input type="text" value="555" id="t4" onfocus="of(4)" onkeyup="okd('555')"/> </td>
<td> <input type="text" value="666" id="t5" onfocus="of(5)" onkeyup="okd('666')"/> </td>
</tr>
<tr>
<td> <input type="text" value="777" id="t6" onfocus="of(6)" onkeyup="okd('777')"/> </td>
<td> <input type="text" value="888" id="t7" onfocus="of(7)" onkeyup="okd('888')"/> </td>
<td> <input type="text" value="999" id="t8" onfocus="of(8)" onkeyup="okd('999')"/> </td>
</tr>
</table>
</body>
</html>

分享到:
评论

相关推荐

    javascript实现的使用方向键控制光标在table单元格中切换

    最近公司开发ERP项目,要求商品入库选择货架号时支持使用方向键快速选择,以提高入库效率。

    上下左右键控制table中光标(兼容多浏览器)

    本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格(table)中的光标移动,并在光标到达最后一个输入框时新增一行,确保这个功能在多个浏览器中都能正常工作。 首先,我们需要理解...

    解决layui-table单元格编辑只能text问题

    本篇将详细探讨如何解决layui-table单元格编辑仅支持text问题,以便在实际项目中实现更多元化的表单控件,如自定义表单类型、时间控件、数字框、下拉选择和单选等。 layui-table是layui框架中的表格组件,它提供了...

    javascript万能table合并单元格,隐藏列 html版

    例如,在报表展示或者数据汇总场景中,通过合并单元格可以使得表格更加简洁明了,而隐藏不必要的列则可以让用户更专注于重要的数据。 #### 二、代码解析 本文将详细介绍如何使用 JavaScript 实现上述功能,并结合...

    方向键控制焦点 JQuery

    在Web开发中,焦点管理是一项重要的...通过理解并应用上述知识点,开发者可以利用JQuery轻松地实现在Web应用中使用方向键控制焦点的功能,提升用户的交互体验。在实际项目中,还需要根据具体需求进行适当的调整和优化。

    JSP中使用JavaScript动态插入删除输入框实现代码.docx

    在本文中,我们将介绍如何在JSP中使用JavaScript实现动态插入删除输入框的功能。 一、JavaScript动态插入删除输入框的实现代码 在JSP中,使用JavaScript可以实现动态插入删除输入框的功能。下面是实现代码: ```...

    获取和设置输入框光标位置的插件

    在JavaScript中,虽然有一些基本的方法可以操作光标,但它们通常比较复杂,不便于直接使用。这就是插件的价值所在,它封装了这些复杂操作,提供简洁易用的API供开发者调用。 该插件可能包含以下核心功能: 1. **...

    bootstrap table单元格新增行并编辑

    在上面的代码中,我们使用了 Bootstrap Table 的 CSS 文件来美化表格的样式,使用 jQuery 库来动态添加新的表格行,并使用 input 元素来编辑单元格的内容。同时,我们还使用 JavaScript 代码来保存修改后的内容,并...

    easyui datagrid实现实现上下左右和回车切换单元格

    根据提供的文件信息,本文将详细解释如何在EasyUI DataGrid中实现上下左右及回车键切换单元格的功能。EasyUI 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 组件来帮助开发者快速构建现代化的 Web 应用...

    table-rowspan表格自动合并单元格插件

    3. **单元格合并**:在网页开发中,如果需要将多个相邻的单元格合并成一个大单元格,可以使用`rowspan`和`colspan`属性。`colspan`与`rowspan`类似,但作用于列的跨度。合并单元格可以提高表格布局的复杂性和美感。 ...

    layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox

    然后,在layui的JS代码中,我们使用`layui.table.render()`方法来渲染表格。在列配置中,我们使用`type: 'checkbox'`来设置该列显示为复选框。完整的代码如下: ```javascript layui.use(['table'], function(){ ...

    JS 实现Table相同行的单元格自动合并示例代码

    在HTML文档中使用JavaScript来自动合并表格中相同行的单元格是一种常见的前端开发技术。这种技术可以提高页面的可读性,尤其是在处理具有相同值的重复数据时。上述代码示例提供了一种简单而有效的方法来实现这一功能...

    Html中用table画斜线

    5. **JavaScript/jQuery插件**:有些插件或库可以帮助在`&lt;td&gt;`中创建动态斜线,如使用jQuery的插件`table-cell-divider`。这种方式相对复杂,适用于需要高度定制的场景。 对于初学者,推荐使用CSS边框方法,因为它...

    JavaScript获取,设置光标位置,兼容InputTextArea

    在JavaScript编程中,获取和设置光标位置是常见的需求,特别是在与用户交互的表单元素如`&lt;input&gt;`和`&lt;textarea&gt;`中。这涉及到DOM(文档对象模型)操作和事件处理,对于创建动态和响应式的网页应用至关重要。本文将...

    javascript实现网页中单击单元格背景变色特效

    javascript实现网页中单击单元格背景变色特效

    jquery弹出键盘输入框代码

    在IT行业中,jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本文将详细讲解如何利用jQuery实现弹出键盘输入框的代码,尤其适用于登录场景,使得用户在触屏设备上无需...

    js统计Table单元格实际行列 不用rowSpan colSpan,而用offsetLeft

    在JavaScript编程中,统计Table单元格的实际行列位置通常涉及到`rowSpan`和`colSpan`属性的使用。然而,有时我们可能需要避开这些属性,转而利用其他方法来获取单元格的位置信息,例如通过计算其`offsetLeft`值。...

    JS+CSS+DIV+Table实现C#中DataGridView控件可修改单元格的值(上次上传那个资源丢失了)

    在本文中,我们将深入探讨如何使用JavaScript、CSS、DIV和HTML Table来实现C#中DataGridView控件的功能,尤其是实现单元格的动态编辑。在.NET框架下,DataGridView是用于展示和编辑数据的强大控件,但在Web环境中,...

    VUE + elementui-table组件 在table-cell单元格中绘制微型echarts图

    通过以上步骤,就可以在Vue项目中使用Element UI的表格组件,并在table-cell单元格中绘制微型的ECharts图表,实现数据的可视化展示。需要注意的是,实际开发过程中可能需要根据实际的数据结构和样式需求进行相应的...

Global site tag (gtag.js) - Google Analytics