JavaScript自定义文本框光标
122 浏览量
2020-10-20
07:01:23
上传
评论
收藏 70KB PDF 举报
JavaScript自定义文本框光标自定义文本框光标
本篇文章主要介绍了JavaScript自定义文本框光标的方法实例，具有很好的参考价值。下面跟着小编一起来看下
吧
文本框（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!=''){
评论0
最新资源