js获得光标位置和键的ASCLL

input输入框中,不允许输入某些特殊字符,当输入特殊字符时替换成空。

问题:绑定keyup事件,为了用户输入方便,当用户点击方向键时进行修改,也会触发keyup事件,这时光标会跳到最后一位。。。。

解决方案一:可以用keycode键的ASCll排除掉,但是点击键盘的其他键光标还是会跳到最后一位。

解决方案二:先获得光标的位置信息,然后进行数据处理操作,最后定位到原来光标的位置。

代码如下:

//绑定keyup事件,调用replaceStr()函数
function replaceStr(){

	//获得光标位置
	var ctrl= document.getElementById('preInfo');
	var CaretPos = 0;   // IE Support
	if(!+"\v1"){
		if (document.selection){
		ctrl.focus ();
		var Sel = document.selection.createRange ();
		Sel.moveStart ('character', -ctrl.value.length);
		CaretPos = Sel.text.length;
		}
	}
	// Firefox support
	else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
		CaretPos = ctrl.selectionStart;
		//IE中有event,火狐中arguments.callee.caller.arguments[0] || window.event
		event=arguments.callee.caller.arguments[0] || window.event;
	}
	//alert(CaretPos);//打印光标位置
	//alert(event.keyCode)//打印键的ASCLL

	if((event.keyCode == 188)||(event.keyCode == 190)||(event.keyCode == 16)||(event.keyCode ==222)){
		//当键盘输入""	&	<	>特殊符号时,执行替换为空串。
		var replaceStr=document.getElementById('preInfo').value;
		replaceStr=replaceStr.replace(/[\"\&\=\:\<\>]+/g,"");
		document.getElementById('preInfo').value=replaceStr;
	}

	//设置光标位置
	//if(!+"\v1"){
		if(ctrl.setSelectionRange){
			ctrl.focus();
			ctrl.setSelectionRange(CaretPos,CaretPos);
			console.log(CaretPos);
		} else if (ctrl.createTextRange) {
			var range = ctrl.createTextRange();
			range.collapse(true);
			range.moveEnd('character', CaretPos);
			range.moveStart('character', CaretPos);
			range.select();
		}
	//}
}
时间: 2024-10-08 12:20:33

js获得光标位置和键的ASCLL的相关文章

js设置光标位置

根据浏览器判断,来定位光标的位置: 通过$.browser.msie来判断是否是IE浏览器 $(function() {         $("#txt").click(function() {             var position = 0;             var txtFocus = document.getElementById("txt");             if ($.browser.msie) {               

js实现光标位置置后

//定位div(contenteditable = "true"),上传图片后,光标移到输入框后面 function po_Last_Div(obj) { if (window.getSelection) {//ie11 10 9 ff safari obj.focus(); //解决ff不获取焦点无法定位问题 var range = window.getSelection();//创建range range.selectAllChildren(obj);//range 选择obj下所

js之向div contenteditable光标位置添加字符

原理: 在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的. 当我们去点击一个输入框的时候,实际上它会产生一个选中对象-selection(就是我们可以看到的文字变成蓝色的那个区域),selection在火狐浏览器可以直接用 window.getSelection()获取,在HTML里面,selection只有一个的,并且selection是一个区域,你可以想象成一个长方形,它是有开始和结束的 当你点击一个输入框,或者你切换到别的输入框,selection是会跟着变化

js手动控制输入框的光标位置

功能:点击外部可选项将文字带入,并且光标在上一次位置后(类似于手机键盘点击) 两种场景: 1. 焦点没有进入文本框或者在文本框中最后,点击外部之后直接将内容加到后面然后跟上光标: 注:光标位置可能和焦点位置不一致,光标最多只能靠近右边框, 2.焦点在文本框且光标在已有文本的中间,例123,在1后,加入4后显示1423并且光标在4后: 在此展示我用的项目代码(angular的动态表单中) getConputation(item) { const formModel = this.formModel

JS将光标移动到文本框后面

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascrip

关于文本输入框获取光标位置以及指定位置插入内容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> <body> &l

TextArea中定位光标位置

原文:TextArea中定位光标位置 在项目中,遇到一个场景:希望能在TextArea中输入某条记录中的明细(明细较简单,没有附属信息,只用记录顺序和值即可,譬如用"+"号来作为明细分隔符:1+1.5+2+3.4),如下图所示: 为了让输入更直观,需要在输入过程中,实时地显示汇总数量和合计:如果用户希望编辑文本中间的某条明细,也可以通过鼠标点击.或者键盘上的上下左右键来定位某个明细,并在页面上提示光标的焦点位置. 最开始,通过windows.event.x.windows.event.

谈谈jQuery和js里有关位置和宽高的方法

总结一下jQuery.原生js设置和获取位置.宽高的方法. 一.jQuery关于元素位置的方法 position() 方法:只能获取,不能设置. 可获取元素相对于其第一个position值不为static的祖先元素的偏移量,如果没有,则是相对于文档的偏移量:返回一个对象,包括两个属性:left,top; 属性值无单位,number类型.具体用法: $(element).position().left; //获取元素相对于其第一个position值不为static的祖先元素的偏移量 offset(

Android EditText插入表情(字符串)到光标位置

前言 之前写的一个Android应用,在回复帖子插入表情的时候存在一个BUG,就是无法在EditText中指定的光标处插入表情字符串,每次添加的表情字符串都跑到了文字末尾.分析了一下apk源码,发现是在表情盘的onClick响应事件中没有正确处理表情字符串的添加方法,这里记录一下如何在EditText指定光标处插入表情字符串. EditText光标处插入表情字符串的方法 既然是在EditText控件中插入表情字符串,那首先需要获取EditText控件对象,示例源码如下: EditText rEd