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

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

JavaScriptHTMLXML 
阅读更多
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>  
分享到：
| JSTL的FOREACH循环之每4列加个TR
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

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

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

    .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++）进行文本处理和编辑器...

Magicbox
Global site tag (gtag.js) - Google Analytics