@H_404_3@***CSS***
@H_404_3@【*************************** 正式开始介绍JS ******************************】
@H_404_3@**左箭头**
1、没有输入文字,按下左箭头,光标仍处于left值为0的位置。
2、当输入了文字后(即:文本框的value值不为空),按下左箭头,光标向左移动。
限制条件:当移动到left值为0的位置时,即使继续按左箭头,光标都不会继续向左移动【光标在其left值必须大于0的条件下才可以移动】
0){
aSpan.style.left=aSpan_l-aSpan_w+'px';
}
}
@H_404_3@**右箭头**
1、没有文字输入,按下右箭头,光标仍处于left值为0的位置。
2、当输入了文字后,按下右箭头,光标向右移动。
限制条件:当移到文本内容最后一个字符的后面时,即使继续按右箭头,光标都不会继续向右移动【光标的left值等于p元素的宽度时,就是光标处于最后一个字符的位置】
@H_404_3@**退格键**
1、当没有字符存在的时候,按下删除键,模拟光标并不会向左移动,保持在原有的位置
2、删除一个字符,光标的位置就向左移动一个单位(在这个例子中是6px);
@H_404_3@**其他按键**
404_3@问题:为什么笔者会将输入框的value值赋值给p元素的innerHTML这行代码【aP.innerHTML=chatting_msg.value;】放置在 keyup 事件处理程序中?
在事件为keydown(或keypress)情况下,执行将文本框的value值赋值给p元素的innerHTML,实际情况下,如果输入两个字符 ‘ab',但是在p元素内显示的就只有第一个字符 ‘a'。
简单来说就是,keydown或keypress对于文本框本身而言显示字符是没有问题,就是你输入多少个字符就显示多少个字符,但是对于要将文本内容显示在p元素内,则会 “反应慢一拍” 。
【提示:笔者对其他非字符键还未作任何处理】
@H_404_3@【************************* 补充 ******************************】
@H_404_3@1、为了在按下退格键时不影响光标的正确定位,需要在按下退格键时把 ”move“函数取消掉
@H_404_3@ -------JM.removeHandler(chatting_msg,false);
2、代码中存在的JM.xxxx,是笔者的代码库
JM.addHandler(...):添加事件处理程序
JM.removeHandler(...):删除事件处理程序
JM.getStyle(...):获取计算机样式的值
>>>>>>>>>>>具体的代码可以参考《》这本书
3、笔者自定义的这个光标现在只适合于输入英文、数字、标点符号,暂时不支持输入中文
@H_404_3@《《《《《《《 完整代码 》》》》》》》》》
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,false);
}
else{
//show value by keyup not keydown,because keydown will slow step;
JM.addHandler(chatting_msg,function () {
aP.innerHTML=chatting_msg.value;
},false);
JM.addHandler(chatting_msg,false);
}
},false);
//move cursor in the text
var move=function () {
var aSpan=JM.getEles('.cursor')[0],'width'));
aSpan.style.left=aSpan_l+aSpan_w+'px';
};
})();
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!