html自定义文本框,JavaScript自定义文本框光标
文本框(input或textarea)的光标无法修改样式(除了通过color修改光标颜色)。但笔者希望个人创建自己的网站时,文本框的光标有属于自己的风格。所以,尝试模拟文本框的光标,设计有自己风格的光标。以下是笔者个人的想法。
【************************基本思路***************************】
对于键盘操作来说,光标的基本操作不外乎最基本的三个键:左箭头(left arrow)、右箭头(right arrow)和退格键(backspace)。
左箭头:让光标向左移动,添加字符或者删除字符
右箭头:让光标向右移动,添加字符或者删除字符
退格键:删除字符
【******** 在聊如何通过JS实现光标具有的基本功能时,先介绍一些html和css ********】
***html***
注意:上面的html格式只是模拟光标,输入字符还是需要靠表单元素的。在页面上,笔者会把真正的表单元素隐藏,只会显示模拟光标的html
第一行:模拟光标 第二行:表单元素里的光标
***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';
};
})();
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
html自定义文本框,JavaScript自定义文本框光标相关推荐
- php单击回复出现回复框,javascript - 评论回复框的显示与隐藏问题
小葫芦2017-05-19 10:16:582楼 假如你的HTML结构如下 回复 提交评价 回复 提交评价 关于回复内容框的存在方式,个人认为是先渲染出来吧,避免点击的时候过多地去操作DOM,影响效率 ...
- R语言ggplot2在可视化图像中添加横线并在横线中添加文本、为横线中添加的文本添加文本框、自定义文本框的填充色(background color for a text annotation)
R语言ggplot2在可视化图像中添加横线并在横线中添加文本.为横线中添加的文本添加文本框.自定义文本框的填充色(background color for a text annotation) 目录
- 如何用javascript获取文本框,下拉框,单选框的对应值或者将值赋给它们?雪原虎 发布于:2007-10-22 00:32
如何用javascript获取文本框,下拉框,单选框的对应值或者将值赋给它们? 雪原虎 发布于:2007-10-22 00:32 1.文本框 1.1 <input type="text ...
- JavaScript弹出框 元素文本输入
JavaScript弹出框 元素文本输入 通过是否确定或者取消进行判断,利用confirm语法,msg会变成布尔值,确定是true,取消是false,可通过,msg值进行判断 msg=confirm( ...
- html显示隐藏域的值,JavaScript获取文本框/编辑框/隐藏域的值
/p> "http://www.w3.org/TR/html4/loose.dtd"> JavaScript获取文本框/编辑框/隐藏域的值_网页代码站(www.webd ...
- 使用JavaScript获取文本框的值方法
使用JavaScript获取文本框的值方法 第一种方法: 重点看<a onclick="add()">获取值</a> 在script中对应的是标签id的值, ...
- php文本输入数字,JavaScript实现文本框只能输入数字的方法介绍
在我们日常开发中,为了更好的给用户带来体验,我们有的时候需要限制文本框输入内容的类型,这里我们很多时候都会使用到正则表达式来完成,今天我们就给大家介绍下JavaScript实现文本框只能输入数字.小数 ...
- javascript弹出浏览器的三种提示框:提示信息框、确认框、输入文本框
浏览器的三种提示框: alert()提示信息框 confirm()提示确认框 prompt()提示输入文本框 1.alert()提示信息框 效果: 实现代码: <script>alert( ...
- JavaScript 自定义年月日选择下拉框select选择的日期方法vue实现
JavaScript 自定义选择年月日,需求如下图所示: 代码示例如下: <div class="select-box"><span class="it ...
- QT 自定义加载等待(Loading)提示框
QT自定义加载等待提示框 一.效果展示 二.源代码 #ifndef LOADINGDIALOG_H #define LOADINGDIALOG_H #include <QMovie> #i ...
最新文章
- 大疆、港科大联手!双目3D目标检测实验效果大放送 | CVPR 2019
- Webpack 的 HtmlWebpackPlugin 如何控制某个 chunks 的 inject 位置?
- 密码篇——非对称加密
- 客户机系统已禁用cpu_Metricbeat System process metricset系统进程监控参数详情
- MybatisPlus中@TableField注解的使用
- 库ppt演示 python_python操作Power Point:PPT幻灯片布局基础
- Git基础知识与常用命令
- bzoj 1638: [Usaco2007 Mar]Cow Traffic 奶牛交通(拓扑排序?+DP)
- 学习笔记︱深度学习以及R中并行算法的应用(GPU)
- python字典数据的特点_Python核心数据类型之字典15
- TSPL学习笔记(2):过程和变量绑定
- Mac 鼠须管 Rime 输入法 安装五笔输入法 教程
- Win10(11)下Qt6.2编译Qtxlsx库
- 国防科技大学 educoder C语言答案(湖南工业大学)
- Matlab微分方程求解
- Sketch快捷键大全 Sketch如何自定义快捷键?
- 考研经验贴(南京航空航天大学,电子信息专硕)
- 如何为 360 度审核提供同事反馈
- 如何还原MySQL备份文件.xb
- 如何通俗理解信创国产化是什么意思?有哪些系统?有什么意义?