jquery获取(设置)文本框(块)内光标位置插件

全冠清

浏览: 52605 次
性别:
来自: 北京

最近访客更多访客>>

Isaacedvr

卿卿-

雨过后放晴

vondon

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (23)

社区版块

存档分类

jQuery 浏览器 HTML

/**
 * @author 全冠清
 */
$.fn.extend({
	position:function( value ){
		var elem = this[0];
			if (elem&&(elem.tagName=="TEXTAREA"||elem.type.toLowerCase()=="text")) {
			   if($.browser.msie){
					   var rng;
					   if(elem.tagName == "TEXTAREA"){ 
						    rng = event.srcElement.createTextRange();
						    rng.moveToPoint(event.x,event.y);
					   }else{ 
					    	rng = document.selection.createRange();
					   }
					   if( value === undefined ){
					   	 rng.moveStart("character",-event.srcElement.value.length);
					     return  rng.text.length;
					   }else if(typeof value === "number" ){
					   	 var index=this.position();
						 index>value?( rng.moveEnd("character",value-index)):(rng.moveStart("character",value-index))
						 rng.select();
					   }
				}else{
					if( value === undefined ){
					   	 return elem.selectionStart;
					   }else if(typeof value === "number" ){
					   	 elem.selectionEnd = value;
       			         elem.selectionStart = value;
					   }
				}
			}else{
				if( value === undefined )
				   return undefined;
			}
	}
})

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>测试</title>
	</head>
	<script language="JavaScript" type="text/javascript" src="jquery-1.3.1.min.js"></script>
	<script language="JavaScript" type="text/javascript" src="jquery-position.js"></script>
	<script language="JavaScript" type="text/javascript">
		$(document).ready(function(){
			$('input:eq(0)').click(function(){
				alert($(this).position());
			})
			$('input:eq(1)').click(function(){
				$(this).position(4);
			})
		})
	</script>
	<body>
		<input type="text"  value="123456789"/>
		<input type="text"  value="123456789"/>
	</body>
</html>

全冠清写道

    $.fn.selectRange = function(start, end){
        return this.each(function(){
            if (this.setSelectionRange) {
                this.focus();
                this.setSelectionRange(start, end);
            }
            else 
                if (this.createTextRange) {
                    var range = this.createTextRange();
                    range.collapse(true);
                    range.moveEnd('character', end);
                    range.moveStart('character', start);
                    range.select();
                }
        });
    };

测试.zip (19.8 KB)
下载次数: 768

分享到：

台词们 | 节选一段编辑手记，原文叫《被认真对待的感 ...

2009-08-03 12:14
浏览 6747
评论(9)
论坛回复 / 浏览 (7 / 9941)
查看更多

9 楼 javaEEdevelop 2012-08-16

Ie中textarea不支持啊

8 楼 cyij 2010-01-12

非常感谢楼主提供的插件，相当好用。
这次正好用在项目里了，由于项目一些特殊需求，进行了一点点小的改动：
 
<pre name="code" class="js">/**
* @author 全冠清
*/
$.fn.extend({
position:function( pos, text ){
var elem = this[0];
if (elem&&(elem.tagName=="TEXTAREA"||elem.type.toLowerCase()=="text")) {
if($.browser.msie){
var rng;
if(elem.tagName == "TEXTAREA"){
rng = event.srcElement.createTextRange();
rng.moveToPoint(event.x,event.y);
}else{
rng = document.selection.createRange();
}
if( pos === undefined ){
rng.moveStart("character",-event.srcElement.value.length);
return rng.text.length;
}else if(typeof pos === "number" ){
var index=this.position();
index>pos?( rng.moveEnd("character",pos-index)):(rng.moveStart("character",pos-index))
rng.select();
if( text === undefined ) {
return pos;
}
}
}else{
if( pos === undefined ){
return elem.selectionStart;
}else if(typeof pos === "number" ){
elem.selectionEnd = pos;
elem.selectionStart = pos;
if( text === undefined ) {
return pos;
}
}
}
if( text !== undefined ) {
var len = elem.value.length;
if(len<1 || pos<0) {
pos = 0;
} else if( pos>len ) {
pos = len;
}
var text1 = elem.value.substr(0,pos);
var text2 = elem.value.substr(pos);
pos += text.length;
elem.value = text1+text+text2;
return this.position(pos);
}
}else{
var index = 0;
if( typeof pos === "number") {
index += pos;
}
return index;
}
}
})
</pre>

 
改动点：
 1：返回结果都统一返回位置信息，如果浏览器不兼容，返回0；
 2：增加一个参数，以便在指定位置插入字符串。

7 楼 swain 2009-09-25

刚测试了一下都可以用不错的插件谢谢

6 楼 swain 2009-09-25

不知道浏览器兼容性方面如何

5 楼 javaAlpha 2009-09-25

不错啊搜藏了

4 楼 yoyozizou 2009-08-04

quaff 写道

支持一个,不知道什么场景下会用到?

对输入进行一些控制时，如输入金额小数点时判断插入位置是否合法

3 楼 quaff 2009-08-04

支持一个,不知道什么场景下会用到?

2 楼全冠清 2009-08-03

    $.fn.selectRange = function(start, end){
        return this.each(function(){
            if (this.setSelectionRange) {
                this.focus();
                this.setSelectionRange(start, end);
            }
            else 
                if (this.createTextRange) {
                    var range = this.createTextRange();
                    range.collapse(true);
                    range.moveEnd('character', end);
                    range.moveStart('character', start);
                    range.select();
                }
        });
    };

1 楼 lw223 2009-08-03

js 看不懂

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论