js控制光标上下移动

最新推荐文章于 2023-03-15 20:30:04 发布
最新推荐文章于 2023-03-15 20:30:04 发布
阅读量2.9k 收藏
点赞数
分类专栏： js web 文章标签： javascript web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17505335/article/details/51787684
版权
web 同时被 2 个专栏收录
19 篇文章 0 订阅
订阅专栏
js
14 篇文章 0 订阅
订阅专栏
<html>   
  <head>   
  <title>Untitled   Document</title>   
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   
  <script   language="javascript">   
 var cols=3;   
 var obj;     
 var key;   
 function setobj(input){   
obj=input;   
 }   
    
 function   init(){ 
document.οnkeydοwn=keyDown;   
document.οnkeyup=keyUp;   
 }   
 
 //按键
 function  keyDown(DnEvents){

 key=window.event.keyCode;


 //f5键
 if(key==116){   
 //取消按键
 window.event.keyCode=0;   
 return  false;   
 }   
 
 //backplace
 if(key==8){  
  //触发事件的控件 既不是 <input />,该语句值在IE里有效
 if(event.srcElement.tagName!="INPUT"){  
 //可以停止事件继续上传
 event.cancelBubble   =   true; 
 //取消事件默认行为
 event.returnValue   =   false;   
 return   false;   
}   
}   


for(var i=0;i<document.forms[0].elements.length;i++){   
 
 if(document.forms[0].elements[i]==obj){ 
 //左键
 if   (key   ==   37){//←   
 if(i>0){   
document.forms[0].elements[i-1].focus();   
}   
}   
//上键
if   (key   ==   38){//↑   
 if(i>cols-1){   
document.forms[0].elements[i-cols].focus();   
 }   
 } 
//右键
if(key   ==   39){//→   
 if(i < 2*cols -1){  
document.forms[0].elements[i + 1].focus();
key = 0;
 }   
}
 
//下键
if   (key   ==   40){//↓
 if(i< cols){   
document.forms[0].elements[cols + i].focus();   
 }   
}   
}   
}   
    
  }   
    
  function   keyUp(UpEvents){   
return   false;   
  }   
  </script>   
  </head>   
    
  <body   bgcolor="#FFFFFF"   text="#000000"   οnlοad="init()">   
  <form>   
  <table   border="0"   cellspacing="0"   cellpadding="0"   align="center">   
      <tr>   
          <td>   
              <input   type="text"   name="textfield"   οnfοcus="setobj(this)">   
          </td>   
          <td>   
              <input   type="text"   name="textfield2"   οnfοcus="setobj(this)">   
          </td>   
          <td>   
              <input   type="text"   name="textfield3"   οnfοcus="setobj(this)">   
          </td>   
      </tr>   
      <tr>   
          <td>     
              <input   type="text"   name="textfield5"   οnfοcus="setobj(this)">   
          </td>   
          <td>     
              <input   type="text"   name="textfield6"   οnfοcus="setobj(this)">   
          </td>   
          <td>     
              <input   type="text"   name="textfield7"   οnfοcus="setobj(this)">   
          </td>   
      </tr>   
  </table>   
  </form>      
  </body>   
  </html>
祥灬子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+xterm.js实现webssh踩坑之旅
看完还不滚去敲代码？
09-17 9411
最近在做的项目需要使用xterminal实现网页远程连接Linux终端，引了这个插件后发现问题很多，接下来一一记录问题所在。 一、如何在vue项目中使用xterm.js 安装xterm.js，博主使用的是3.x npm i xterm --save 在项目中引用 新建组件Xterminal.vue <template> <div class="console" id="terminal'" v-loading="loading" element-loading-text="拼
.net页面实现表格上下左右移动光标
02-14
通过js实现table,text上下左右移动光标并同时选择text内容
用鼠标方向改变的 左右上下移动
weixin_34067102的博客
03-01 219
package{ import flash.display.Sprite; import flash.events.Event; /** *根据鼠标移入的方向来改变旋转的方向 * @author Administrator * */ public class Rotate3 extends Sprite { ...
jQuery实现用方向键控制层的上下左右移动
12-12
题目：按下方向键时，使层向相应的方向平滑移动20像素；四个方向键的键码分别是37（左）、38（上）、39（右）和40（下）。 然后我写了下面的代码： $div就是要移动的层，且它的position已在CSS中设为relative。瞄一眼好像没什么问题，运行之后发现下面的问题： 1.按了向下之后，再按向上没有反应。 2.按了向右之后，再按向左没有反应。 后来经一网友点拨，恍然大悟： 当按了向下的时候，top值为20px，这时候再按向上，从Firebug可以看出此时的bottom值也是20px，而层没有向上移动是因为浏览首先解析的是top，也就是说{top:20px;bottom:100px}和
jQ实现跟着鼠标移动
qq_34559257的博客
05-16 2885
这个重要是用了pageY和pageX这两个属性。$(window).mousemove(function (e) { // 兼容性写法(js中需要&amp;jQ中帮助我们实现了兼容性判断) // console.log('你在移动'); // console.log(e); co...
Vue xtermjs 黑窗口 插件的使用
c_x_m的博客
03-15 3137
但其实感觉官网没什么用，只有一个最简单的demo,具体的使用手册，还是得靠前人栽树了。由于我已经写好了ws通用组件，所以这里并没有创建此组件和使用AttachAddon。因为我这里已经和后台对接了ws 所以会有重复的返回（单数行都是ws返回的信息）xterm.js的附加组件，用于附加到Web Socket。
js 上下左右键控制焦点(示例代码)
10-26
从给定的文件信息中，我们可以提取以下知识点： 1. JavaScript中实现键盘事件监听：...以上知识点详细介绍了js上下左右键控制焦点的功能实现及其相关技术细节，是前端开发者在进行类似交互设计时需要掌握的关键内容。
js实现鼠标左右移动，图片也跟着移动效果
12-12
效果：鼠标往左移，图片对应右移，鼠标往右移，图片就左移动。图片距离越远偏移距离越大。 思路：首先获取图片原先的距离。设置一个变化值，图片的最终距离等于原先的距离加上变化值 布局：大盒子里面是图片，大盒子...
js控制图片上下左右移动
07-18
在JavaScript（JS）中，控制图片上下左右移动是网页动态效果的基本实现，广泛应用于网页游戏、交互式设计等场景。本教程将深入讲解如何利用JavaScript实现这一功能。 首先，我们需要在HTML中设置一个图片元素，并为...
上下左右键控制table中光标(兼容多浏览器)
01-25
本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格（table）中的光标移动，并在光标到达最后一个输入框时新增一行，确保这个功能在多个浏览器中都能正常工作。 首先，我们需要理解...
Xtermjs完整的浏览器终端支持输入法和身体滚动
08-08
Xterm.js – 完整的浏览器终端支持输入法和身体滚动
判断鼠标上下左右移动状态
06-06
以下将详细讲解如何判断鼠标上下左右移动状态。 首先，我们需要知道的是，大多数编程语言都提供了对鼠标事件的支持，例如JavaScript、Python、C#等。这些语言的库或API允许我们监听鼠标的位置变化，包括点击、移动...
vue xterm.js命令行使用及问题解决
热门推荐
潇蓝诺依的博客
03-21 3万+
安装 npm i xterm --save 配置 基础展示 &amp;lt;template&amp;gt; &amp;lt;div class=&quot;container&quot;&amp;gt; &amp;lt;div id=&quot;terminal-container&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/div&
技术干货 ｜看我如何来解Web Terminal假性输入框
a958014226的博客
07-27 1010
编者按 写在前面的话 在介绍本篇文章的时候，先说一下本篇文章的一些背景。笔者是基于公司的基础建设哆啦 A 梦（Doraemon） (https://github.com/DTStack/doraemon)一些功能背景写的这篇文章。不了解或者有兴趣的同学可以去袋鼠云 (https://github.com/DTStack)的 github 下面了解一下百宝箱哆啦 A 梦。 在哆啦 A 梦中可以配置代理，我们在配置中心的配置详情下，可以找到主机对应的 nginx 配置文件或者其他文件，可以在这里对其.
初窥Xterm.js
weixin_33913377的博客
03-28 1万+
前言 入职的新公司所在的事业部专注于K12的编程教育。公司项目里有使用xterm.js这个库, 并基于master分支做出了一定的修改。为了尽快的熟悉业务以及公司的代码, 所以这里打算学习xterm.js的文档(粗略的翻译, 方便自己查阅, 凡是保留原文的地方, 是我目前还没有明白具体使用场景和用法的地方) 最近比较忙啊, 还没有过试用期也不敢太早回家。所以只有这个周六更新了
vue+xterm.js 实现Linux command界面
lxlmycsdnfree的博客
09-19 2万+
首先安装 node 安装xterm npm i xterm --save 在 main.js 中加入： import 'xterm/dist/xterm.css' 创建 Console.vue &lt;template&gt; &lt;div class="console" id="terminal"&gt;&lt;/div&gt; &lt;/template&gt; &lt;
xterm.js V4.13.0 学习文档（for vue）
weixin_42136785的博客
09-03 9058
安装Install npminstall--savexterm 使用Using import'xterm/css/xterm.css' import{Terminal}from'xterm' constterm=newTerminal() term.open(document.getElementById('xterm-container')) 配置项Options /** *当canvas渲染器运行过慢时，会回退为DOM渲...
解决MobarXterm连接Linux服务器不能按方向键问题
Tsingzao的博客
12-21 3918
MobarXterm提供了一种便捷的Windows连接Linux服务器的方式，在用的时候却会发现，有时候按方向键或者home、delete键之类的会出现很长一串数字，如'22222222222222222222222222222222222222222'这种形式。 解决方法： 将搜狗输入法切换为微软自带的输入法即可。 关于mobarxterm打开文件管理器 naut...
用JS和HTML实现斜线表头
祥子的博客
01-02 3623
首先下载JS图形库API:wz_jsgraphics.js 第二步：编写html文件：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>
el-table实现鼠标拖曳上下移动调整排列顺序
最新发布
07-15
要实现鼠标拖拽上下移动调整el-table的排列顺序，可以使用el-table内置的sortable属性和dragging事件，并结合自定义的拖拽功能。 首先，需要给el-table的行添加一个自定义的拖拽指示器，用于识别拖拽的起始和目标位置。可以使用HTML5的draggable属性来实现拖拽功能。在el-table中，可以通过scoped slot来自定义行的内容。 在模板中，可以这样定义el-table： ```html <el-table :data="tableData" :sortable="true"> <template slot-scope="{ row, $index }"> <tr draggable="true" @dragstart="handleDragStart($event, $index)" @dragover="handleDragOver($event, $index)" @drop="handleDrop($event, $index)" @dragend="handleDragEnd"> <!-- 行内容 --> </tr> </template> </el-table> ``` 在这个例子中，我们给每一行的tr元素添加了draggable属性，并绑定了dragstart、dragover、drop和dragend事件。其中，dragstart事件表示拖拽开始，dragover事件表示拖拽过程中，drop事件表示拖拽结束时放置元素，dragend事件表示拖拽结束。 接下来，在Vue组件中定义相关的事件处理方法： ```javascript methods: { handleDragStart(event, index) { event.dataTransfer.setData('text/plain', index); // 设置被拖动的数据 event.dataTransfer.effectAllowed = 'move'; // 设置拖动的效果 event.target.classList.add('dragging'); // 添加拖动时的样式 }, handleDragOver(event, index) { event.preventDefault(); // 阻止默认行为 event.dataTransfer.dropEffect = 'move'; // 设置拖动的效果 }, handleDrop(event, index) { event.preventDefault(); // 阻止默认行为 const fromIndex = Number(event.dataTransfer.getData('text/plain')); // 获取被拖动的数据 if (fromIndex !== index) { this.tableData.splice(index, 0, this.tableData.splice(fromIndex, 1)[0]); // 调整数据的位置 } }, handleDragEnd(event) { event.target.classList.remove('dragging'); // 移除拖动时的样式 } } ``` 在handleDragStart方法中，我们使用event.dataTransfer.setData方法来设置被拖动的数据，这里我们将行的索引作为数据进行传递。同时，我们设置了拖动的效果和添加了拖动时的样式。 在handleDragOver方法中，我们通过event.preventDefault方法阻止默认行为，并设置了拖动的效果。 在handleDrop方法中，我们通过event.preventDefault方法阻止默认行为，并获取被拖动的数据，然后根据拖动的起始和目标位置调整el-table的数据的位置。 在handleDragEnd方法中，我们移除了拖动时添加的样式。 最后，可以通过CSS来定义拖动时的样式： ```css tr.dragging { background-color: #f0f0f0; } ``` 这样，就实现了el-table的鼠标拖拽上下移动调整排列顺序的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值