`
caibaoying
  • 浏览: 26742 次
  • 来自: ...
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

上下左右键控制光标在文本框内移动

阅读更多
xml 代码
  1. <html>      
  2.   <head>      
  3.   <title>Untitled   Document</title>      
  4.   <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">      
  5.   <script   language="javascript">      
  6.   var   cols=3;      
  7.   var   obj;      
  8.   var   CanMove=false;      
  9.   var   key;      
  10.   function   setobj(input){      
  11.   obj=input;      
  12.   }      
  13.        
  14.   function   init(){      
  15.   document.onkeydown=keyDown;      
  16.   document.onkeyup=keyUp;      
  17.   }      
  18.        
  19.   function   keyDown(DnEvents){      
  20.   var   key=window.event.keyCode;      
  21.   if(key==116){      
  22.   window.event.keyCode=0;      
  23.   return   false;      
  24.   }      
  25.   if(key==8){      
  26.   if(event.srcElement.tagName!="INPUT"){      
  27.   event.cancelBubble   =   true;      
  28.   event.returnValue   =   false;      
  29.   return   false;      
  30.   }      
  31.   }      
  32.   var   IsCtrl=window.event.ctrlKey;      
  33.   if(!IsCtrl){      
  34.   return;      
  35.   }      
  36.   for(var   i=0;i<document.forms[0].elements.length;i++){      
  37.   if(document.forms[0].elements[i]==obj){      
  38.   if   (key   ==   37){//←      
  39.   if(i>0){      
  40.   document.forms[0].elements[i-1].focus();      
  41.   }      
  42.   }      
  43.   if   (key   ==   38){//↑      
  44.   if(i>cols-1){      
  45.   document.forms[0].elements[i-cols].focus();      
  46.   }      
  47.   }      
  48.   if   (key   ==   39){//→      
  49.   if(i<document.forms[0].elements.length-1){      
  50.   document.forms[0].elements[i+1].focus();      
  51.   }      
  52.   }      
  53.   if   (key   ==   40){//↓      
  54.   if(i<document.forms[0].elements.length-cols){      
  55.   document.forms[0].elements[i+cols].focus();      
  56.   }      
  57.   }      
  58.   }      
  59.   }      
  60.        
  61.   }      
  62.        
  63.   function   keyUp(UpEvents){      
  64.   return   false;      
  65.   }      
  66.   </script>      
  67.   </head>      
  68.        
  69.   <body   bgcolor="#FFFFFF"   text="#000000"   onload="init()">      
  70.   <form>      
  71.   <table   border="0"   cellspacing="0"   cellpadding="0"   align="center">      
  72.       <tr>      
  73.           <td>      
  74.               <input   type="text"   name="textfield"   onfocus="setobj(this)">      
  75.           </td>      
  76.           <td>      
  77.               <input   type="text"   name="textfield2"   onfocus="setobj(this)">      
  78.           </td>      
  79.           <td>      
  80.               <input   type="text"   name="textfield3"   onfocus="setobj(this)">      
  81.           </td>      
  82.       </tr>      
  83.       <tr>      
  84.           <td>        
  85.               <input   type="text"   name="textfield5"   onfocus="setobj(this)">      
  86.           </td>      
  87.           <td>        
  88.               <input   type="text"   name="textfield6"   onfocus="setobj(this)">      
  89.           </td>      
  90.           <td>        
  91.               <input   type="text"   name="textfield7"   onfocus="setobj(this)">      
  92.           </td>      
  93.       </tr>      
  94.   </table>      
  95.   </form>      
  96.   用Ctrl+方向键可以方便的在控件中移动,你也可以自己改成不要Ctrl的。      
  97.   </body>      
  98.   </html>  
分享到:
评论

相关推荐

    易语言编辑框光标移动源码.7z

    例如,方向键可以用来上下左右移动光标,回车键可能用于换行。 5. **鼠标点击事件**:点击编辑框内的任意位置,光标会移动到点击处。源码中会包含处理鼠标点击事件的代码,以更新光标位置。 6. **条件判断与逻辑...

    易语言编辑框光标移动源码

    在本源码示例中,我们将探讨如何在易语言中控制编辑框内的光标移动。 首先,我们需要理解易语言的基本语法结构。易语言采用了中文关键词,使得初学者能够快速理解和上手。例如,“编辑框1.光标位置”就是易语言中...

    .net页面实现表格上下左右移动光标

    以上就是一个简单的JavaScript实现,允许用户在.NET页面的HTML表格中通过键盘上下左右移动光标并同时选择文本。这个功能对于数据输入或编辑场景特别有用,用户可以通过键盘高效地导航和操作表格内容。在实际项目中,...

    易语言编辑框光标移动

    在编程领域,尤其是在开发用户界面时,控制编辑框(Edit Box)中的光标移动是一项基本且重要的任务。易语言作为一款中国本土的编程语言,以其简单直观的语法为初学者和开发者提供了便捷的编程环境。本篇文章将深入...

    易语言编辑框光标移动源码.rar

    在编程时,我们需要通过特定的命令来控制编辑框的行为,比如读取文本、插入文本、删除文本以及移动光标。 光标移动涉及到的易语言命令主要包括“设置光标位置”和“获取光标位置”。通过“设置光标位置”命令,我们...

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

    1. **获取光标位置**:通过调用插件提供的函数,可以获取到光标在输入框内的当前位置。这通常是基于字符的索引,有助于分析用户的输入状态。 2. **设置光标位置**:插件还应提供一个方法,允许开发者指定光标的位置...

    Win32 EditControl多行文本框自动换行,并在添加新行时自动将光标移到末尾

    标题和描述中提到的问题主要涉及到两个方面:一是如何使EditControl自动换行,二是如何在添加新行后将光标移动到文本末尾。 1. **EditControl自动换行**: 在Win32 API中,EditControl默认支持多行文本模式,但并...

    jQuery获取和设置文本框光标

    - 若要在文本框内移动光标,可以结合设置光标位置和触发`focus`事件,确保光标移动后依然可见。例如,`$("#myTextBox").focus().setSelectionRange(newPosition, newPosition)`。 6. **插件使用**: - 压缩包中的...

    文本域定位光标并添加数据

    在JavaScript中,我们可以使用`document.getElementById('yourTextField').focus()`来将焦点移动到特定的文本域,然后通过`setSelectionRange()`或`createTextRange()`方法设置光标的起始和结束位置。 例如,如果你...

    在不同的区域显示不同的光标

    在某些特定的应用场景中,为了提高用户体验和操作效率,可能需要在不同的区域内显示不同的光标形状。这个特性尤其常见于图形编辑软件、地图应用或者复杂的桌面环境中。下面我们将详细讨论如何实现这一功能,以及它在...

    cocos带光标的输入框

    在Cocos2d-x游戏开发框架中,"cocos带光标的输入框"是指一种具有光标指示功能的文本输入组件。这个组件是为了解决原生Cocos2d-x库中对用户交互输入的不足,特别是在需要用户输入文本,如用户名、密码等场景时。在...

    QT Lineedit 单行文本编辑框 - qq_29406323的博客 - CSDN博客1

    QLineEdit允许用户在应用程序中输入和编辑一行文本,常用于简单的数据输入或者搜索框等场景。以下是对QLineEdit类及其相关知识点的详细解释: ### 一、QLineEdit简介 QLineEdit提供了基本的文本编辑功能,如文本...

    cocos2d带光标的可插入写入、删除,可加密的文本框

    在这个定制的Cocos2d组件中,光标不仅是一个静态的元素,而是动态地随着用户的输入移动,允许用户在文本中插入新的字符或删除现有字符。这样的功能是通过监听键盘事件和更新光标位置来实现的,确保了用户交互的直观...

    javascript获得光标所在的文本框(text textarea)中的位置.docx

    在前端开发中,经常需要处理用户在文本框(如`&lt;input type="text"&gt;`或`&lt;textarea&gt;`)内的输入行为,例如实现自动填充、实时校验等功能时,获取光标的位置就显得尤为重要。本文将详细介绍如何使用JavaScript来实现这...

    javaScript让文本框内的最后一个文字的后面获得焦点实现代码

    其中一种常见的需求是让文本框内的最后一个文字的后面获得焦点。通过JavaScript实现这一功能,可以确保用户在输入时,光标总是位于现有文本的末尾,从而方便用户继续输入。 代码示例中提供了两种方法,一种是直接...

    QTableView 标题换行显示和富文本显示 qt5.8

    在默认情况下,`QTableView`的列标题会以单行显示,但有时我们可能需要在有限的空间内展示更多的信息,这时就需要让标题换行。这可以通过自定义`QHeaderView`实现。你可以创建一个继承自`QHeaderView`的子类,重写`...

    带光标触控输入框,并有注册登录

    同时,还要处理文本的输入和删除,确保用户的输入能够正确地显示在输入框内。光标的动画效果可以通过定时器更新其位置来实现,给人一种正在输入的视觉反馈。 接着,我们来看“注册与登录功能”。在游戏应用中,注册...

    cocos2dx带光标的多行输入框

    为了支持多行输入,我们需要监听键盘事件,尤其是回车键,当检测到回车键被按下时,在当前行末尾添加换行符,将文本缓冲区的内容分割成多行,并调整光标位置到下一行开头。同时,可能需要处理文本的自动换行,确保...

    cocos2d 带光标的多行输入框

    为了使用户可以移动光标,需要监听触摸事件,当用户在输入框内点击时,根据点击位置计算出光标的新位置。 6. **布局和约束**: 多行输入框的大小可能需要动态调整,以适应文本内容的增加。这需要应用布局约束(如...

    VC++文本编程完整版

    在本文中,我们将深入探讨“VC++文本编程”的主题,主要基于标题“VC++文本编程完整版”和描述中提到的“能删除上一行的程序”这一功能。这个专题主要涵盖了使用Microsoft Visual C++(VC++)进行文本处理和编辑器...

Global site tag (gtag.js) - Google Analytics