文本框(input或textarea)的光标无法修改样式(除了通过color修改光标颜色)。但笔者希望个人创建自己的网站时,文本框的光标有属于自己的风格。所以,尝试模拟文本框的光标,设计有自己风格的光标。以下是笔者个人的想法。

【************************基本思路***************************】

对于键盘操作来说,光标的基本操作不外乎最基本的三个键:左箭头(left arrow)、右箭头(right arrow)和退格键(backspace)。

左箭头:让光标向左移动,添加字符或者删除字符

右箭头:让光标向右移动,添加字符或者删除字符

退格键:删除字符

【********  在聊如何通过JS实现光标具有的基本功能时,先介绍一些html和css  ********】

***html***

<div class="cursor_module">
<p class="cursor_content"></p><span class="cursor"></span>
</div>

注意:上面的html格式只是模拟光标,输入字符还是需要靠表单元素的。在页面上,笔者会把真正的表单元素隐藏,只会显示模拟光标的html

<form id="chatting_form" class="clearfix" enctype="application/x-www-form-urlencoded">
<label for="chatting_msg"></label><input type="text" id="chatting_msg" autofocus name="chatting_msg">
</form>

     第一行:模拟光标        第二行:表单元素里的光标

 

***CSS***

.cursor_module{
position: relative;
} .cursor_content{
position: absolute;
top: 0;
left: 0;
width: auto;
max-width: 90%;
word-wrap: break-word;
overflow: hidden;
display: inline-block;
white-space: pre;
}
.cursor{
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 16px;
display: inline-block;
background: green;
z-index: 1000;
}

【*************************** 正式开始介绍JS ******************************】

**左箭头**

1、没有输入文字,按下左箭头,光标仍处于left值为0的位置。

2、当输入了文字后(即:文本框的value值不为空),按下左箭头,光标向左移动。

限制条件:当移动到left值为0的位置时,即使继续按左箭头,光标都不会继续向左移动【光标在其left值必须大于0的条件下才可以移动】

if(cCode===37 && chatting_msg.value!=''){
if(aSpan_l>0){
aSpan.style.left=aSpan_l-aSpan_w+'px';
}
}

**右箭头**

1、没有文字输入,按下右箭头,光标仍处于left值为0的位置。

2、当输入了文字后,按下右箭头,光标向右移动。

限制条件:当移到文本内容最后一个字符的后面时,即使继续按右箭头,光标都不会继续向右移动【光标的left值等于p元素的宽度时,就是光标处于最后一个字符的位置】

 else if(cCode===39 && chatting_msg.value!=''){
aSpan.style.left=aSpan_l+aSpan_w+'px';
if(aSpan_l===aP_width){
aSpan.style.left=aP_width+'px';
}
}

**退格键**

1、当没有字符存在的时候,按下删除键,模拟光标并不会向左移动,保持在原有的位置

2、删除一个字符,光标的位置就向左移动一个单位(在这个例子中是6px);

else if(cCode===8){
if(chatting_msg.value!=''){
aP.innerHTML=chatting_msg.value;
if(aSpan_l!=0){
aSpan.style.left=aSpan_l-aSpan_w+'px';
}
}else{
aSpan.style.left=0;
}
//if enter backspace,remove move event
JM.removeHandler(chatting_msg,'input',move,false);
}  

**其他按键**

else{
//show value by keyup not keydown,because keydown will slow step;
JM.addHandler(chatting_msg,'keyup',function () {
aP.innerHTML=chatting_msg.value;
},false);
JM.addHandler(chatting_msg,'input',move,false);
}
var move=function () {
var aSpan=JM.getEles('.cursor')[0],
aSpan_l=parseInt(JM.getStyle(aSpan,'left')),
aSpan_w=parseInt(JM.getStyle(aSpan,'width'));
aSpan.style.left=aSpan_l+aSpan_w+'px';
};

  

问题:为什么笔者会将输入框的value值赋值给p元素的innerHTML这行代码【aP.innerHTML=chatting_msg.value;】放置在 keyup 事件处理程序中?

在事件为keydown(或keypress)情况下,执行将文本框的value值赋值给p元素的innerHTML,实际情况下,如果输入两个字符 ‘ab’,但是在p元素内显示的就只有第一个字符 ‘a’。

简单来说就是,keydown或keypress对于文本框本身而言显示字符是没有问题,就是你输入多少个字符就显示多少个字符,但是对于要将文本内容显示在p元素内,则会 “反应慢一拍” 。

【提示:笔者对其他非字符键还未作任何处理】

【************************* 补充 ******************************】

1、为了在按下退格键时不影响光标的正确定位,需要在按下退格键时把 ”move“函数取消掉  

    -------JM.removeHandler(chatting_msg,'input',move,false);

2、代码中存在的JM.xxxx,是笔者的代码库

  JM.addHandler(...):添加事件处理程序

  JM.removeHandler(...):删除事件处理程序

JM.getStyle(...):获取计算机样式的值

>>>>>>>>>>>具体的代码可以参考《JavaScript高级程序设计》这本书

3、笔者自定义的这个光标现在只适合于输入英文、数字、标点符号,暂时不支持输入中文

《《《《《《《    完整代码    》》》》》》》》》

var Cursor=(function () {
var chatting_msg=JM.getEles('[name=\'chatting_msg\']')[0];
var cursor_module=JM.getEles('.cursor_module')[0];
var chatting_footer=JM.getEles('.chatting_footer')[0]; //create elements
var cP=document.createElement('p');
var cSpan=document.createElement('span');
JM.addClass(cP,'cursor_content');
JM.addClass(cSpan,'cursor');
JM.addNodes(cursor_module,cSpan);
JM.addNodes(cursor_module,cP); //keydown
JM.addHandler(chatting_msg,'keydown',function (event) {
var ev=JM.getEvent(event),
cCode=JM.getCharCode(ev); var aP=JM.getEles('.cursor_content')[0],
aSpan=JM.getEles('.cursor')[0]; var aP_width=parseInt(JM.getStyle(aP,'width'));//get aP real width var aSpan_l=parseInt(JM.getStyle(aSpan,'left')),//get span left
aSpan_w=parseInt(JM.getStyle(aSpan,'width'));//get span width var val=chatting_msg.value;
//left arrow
//没有value值,按左箭头不动
//有value值,按右箭头,光标向左移,但移到前面一个字符的后面就不可以再移动
if(cCode===37 && chatting_msg.value!=''){
if(aSpan_l>0){
aSpan.style.left=aSpan_l-aSpan_w+'px';
}
}
//right arrow
//没有value值,按右箭头不动
//有value值,按右箭头,光标向右移,但移到最后一个字符的后面就不可以再移动
else if(cCode===39 && chatting_msg.value!=''){
aSpan.style.left=aSpan_l+aSpan_w+'px';
if(aSpan_l===aP_width){
aSpan.style.left=aP_width+'px';
}
}
//backspace
else if(cCode===8){
if(chatting_msg.value!=''){
aP.innerHTML=chatting_msg.value;
if(aSpan_l!=0){
aSpan.style.left=aSpan_l-aSpan_w+'px';
}
}else{
aSpan.style.left=0;
}
//if enter backspace,remove move event
JM.removeHandler(chatting_msg,'input',move,false);
}
else{
//show value by keyup not keydown,because keydown will slow step;
JM.addHandler(chatting_msg,'keyup',function () {
aP.innerHTML=chatting_msg.value;
},false);
JM.addHandler(chatting_msg,'input',move,false);
}
},false); //move cursor in the text
var move=function () {
var aSpan=JM.getEles('.cursor')[0],
aSpan_l=parseInt(JM.getStyle(aSpan,'left')),
aSpan_w=parseInt(JM.getStyle(aSpan,'width'));
aSpan.style.left=aSpan_l+aSpan_w+'px';
};
})();

  

JavaScript 自定义文本框光标——初级版的更多相关文章

  1. WPF 自定义文本框输入法 IME 跟随光标

    本文告诉大家在 WPF 写一个自定义的文本框,如何实现让输入法跟随光标 本文非小白向,本文适合想开发自定义的文本框,从底层开始开发的文本库的伙伴.在开始之前,期望了解了文本库开发的基础知识 本文实现的 ...

  2. javascript当文本框获得焦点设置边框

    javascript当文本框获得焦点设置边框:本章节介绍一下当文本框获得焦点以后如何设置文本框的边框样式,本来是一个非常简单的问题,但是有可能前台美工人员对javascript并不是太了解,所以还是通 ...

  3. Xamarin Android自定义文本框

    xamarin android 自定义文本框简单的用法 关键点在于,监听EditText的内容变化,不同于java中文本内容变化去调用EditText.addTextChangedListener(m ...

  4. wxpython 支持python语法高亮的自定义文本框控件的代码

    在研发闲暇时间,把开发过程中比较重要的一些代码做个珍藏,下面的代码内容是关于wxpython 支持python语法高亮的自定义文本框控件的代码,应该是对大家也有用. import keywordimp ...

  5. 【Javascript】在文本框光标处插入文字并定位光标 (转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 使用Javascript限制文本框只允许输入数字

    很多时候需要用到限制文本框的数字输入,试过许多方法,都不太理想,遂决定自己实现一个来玩玩.曾经使用过的方法通过onkeydown事件来控制只允许数字: <input onkeydown=&quo ...

  7. javaScript:让文本框内的最后一个文字的后面获得焦点

    //当失去交点以后 让文本框内的文字获得焦点 并且光标移到最后一个字后面 function myfocus(myid) { if(isNav){ document.getElementById(myi ...

  8. android自定义文本框,后面带清空按钮

    android常见的带清空按钮的文本框,获得焦点时如果有内容则显示,否则不显示 package com.qc.health.weight; import com.qc.health.R; import ...

  9. JavaScript显示文本框后自动获取焦点

    废话少说,见官方文档: 他的用法是:document.getElementById('username').focus();                   这样写在display:block;显 ...

随机推荐

  1. github issues的操作

    https://help.github.com/en/articles/searching-issues-and-pull-requests 根据 reporter筛选issues https://h ...

  2. 总结java中的super和this关键字

    知识点: 在java类中使用super引用父类的成分,用this引用当前对象 this可以修饰属性.构造器.方法 super可以修饰属性.构造器.方法 关于子类实例化过程中的内存分配,在下一篇博客中说 ...

  3. 《C语言程序设计》指针篇<二>

    通过指针引用多维数组 如何理解二维数组元素的地址? 要知道,这本书用了整整两页的内容来讲解这方面的知识,从这里足以看出来理解通过指针来引用二维数组是一件比较麻烦的事情,但是我认为理解并不难. 什么是二 ...

  4. RN的第一个API-----注册组件Appregistry

    首先解释下AppRegistry是JS运行所有React Native应用的入口  什么是入口? 1.在我们初始化一个react native项目的时候 默认的index.ios.js/index.i ...

  5. django字段查询参数及聚合函数

    字段查询是指如何指定SQL WHERE子句的内容.它们用作QuerySet的filter(), exclude()和get()方法的关键字参数. 默认查找类型为exact. 下表列出了所有的字段查询参 ...

  6. Codeforces 38B - Chess

    38B - Chess 思路:懂点象棋的规则就可以,看看哪些点可以放马. 代码: #include<bits/stdc++.h> using namespace std; #define ...

  7. 使用mothur进行OTU聚类

    微生物16S的OTU聚类工具有很多,最常用的就是 usearch.cdhit-OTU.mothur. 这些工具大多都是针对二代测序平台的,usearch的64bit版本是收费的. 如果要跑PacBio ...

  8. Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)

    官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...

  9. Population Size CodeForces - 416D (贪心,模拟)

    大意: 给定$n$元素序列$a$, 求将$a$划分为连续的等差数列, 且划分数尽量小. $a$中的$-1$表示可以替换为任意正整数, 等差数列中必须也都是正整数. 贪心策略就是从前到后尽量添进一个等差 ...

  10. Party CodeForces - 906C (状压)

    大意: 给定n(n<=22)个人, m个关系谁跟谁是朋友, 朋友关系是双向的, 每次操作可以选择一个人, 使他的朋友互相成为朋友, 求最少多少次操作可以使所有人互相认识 这个题挺巧妙的了, 关键 ...