jQuery Caret (jCaret) Plugin - determine or set caret position

About jQuery Caret (jCaret) Plugin

Welcome to the examplet page of jQuery Caret (jCaret) Plugin. The new home page of jQuery Caret (jCaret) has been moved to jquery-plugin at buss.hk. The page is now only used as a collection of examples related to jQuery Caret (jCaret) Plugin.

The permanent address for this page is http://examplet.buss.hk/jquery/caret.php and the content from cloudgen.w0ng.hk will be moved to examplet.buss.hk gradually.

Latest Updated of jQuery Caret (jCaret) Plugin

April 4, 2010: Fix the typo error for the jQuery Caret (jCaret) plugin, thanks very much for Georg Henkel and Markus Klimmasch have sent Email to me pointing out the bugs.

March 24,2010: Suggested by Iszak Bryan to remove unnecessary code from jQuery Caret (jCaret) Plugin and to provide minified version. By the way, I have rewritten the code to get optimized compression by Google Closure Compiler (so it look a little bit strange ^^;).

March 8, 2010: Add a TryCode Editor in this page, feel free to play with the example

March 2, 2010: Thanks for the suggestion from Андрей Юткин for for fixing the display problem in IE 8.

November 23, 2009: Detecting the position in TinyMCE is quite different. If you are interested in detecting the position in TinyMCE click here.

November 22, 2009: Add an example controlling textbox in ifram, see #8

October 23, 2009: Thanks for Roberto Bicchierai pointing out some calculation error for highlighting text. I have fixed it in the current version.

Demonstration

Example #1

Demonstration of using the caret().start and caret().end properties from jQuery Caret (jCaret) Plugin for displaying selected range.

>> Play with the code in a new window <<

<input type="text" class="sensor" size="30" /><br/>
Caret Position: start=<span class="caretStart"></span>, end=<span class="caretEnd"></span>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript">
(function($){
	$("document").ready(function(){
		$("input:text.sensor").keydown(function(){
			$("span.caretStart").text($(this).caret().start);
			$("span.caretEnd").text($(this).caret().end);
		}).keypress(function(){
			$("span.caretStart").text($(this).caret().start);
			$("span.caretEnd").text($(this).caret().end);
		}).mousemove(function(){
			$("span.caretStart").text($(this).caret().start);
			$("span.caretEnd").text($(this).caret().end);
		});
	});
})(jQuery);
</script>

Example #2

Demonstration of selection part of the text by specifying the start and end information using JSON format in jQuery Caret (jCaret) Plugin:

>> Play with the code in a new window <<

<input type="text" class="hola" size="30" /><input class="hightlight" type="button" value="highlight mundo"/><br/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript">
(function($){
	$("document").ready(function(){
		$("input:button.hightlight").click(function(){
			$("input:text.hola").val("¡Hola, mundo!").caret({start:7,end:12});
		});
	});
})(jQuery);
</script>

Example #3

Demonstration of using caret().text property of jQuery Caret (jCaret) Plugin for displaying selected text.

>> Play with the code in a new window <<

<input type="text" class="echoText" size="30" /><br/>
<span class="selectedText"></span>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript">
(function($){
	$("document").ready(function(){
		$("input:text.echoText").keyup(function(){
			$("span.selectedText").text("..."+$(this).caret().text);
		}).mouseup(function(){
			$("span.selectedText").text("..."+$(this).caret().text);
		});
	});
})(jQuery);
</script>

Example #4

Demonstration of selection part of the text by supplying start and end directly:

>> Play with the code in a new window <<

<input type="text" class="hello" size="30" /><input class="hightlight2" type="button" value="highlight Hello"/><br/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript">
(function($){
	$("document").ready(function(){
		$("input:button.hightlight2").click(function(){
			$("input:text.hello").val("Hello, World!").caret(0,5);
		});
	});
})(jQuery);
</script>

Example #5

Demonstration of selection part of the text by providing the search string:

>> Play with the code in a new window <<

<input type="text" class="searchbox" value="The brown fox is jumping over the brown tree" size="50"/>
<input class="hightlight3" type="button" value="highlight fox"/><br/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript">
(function($){
	$("document").ready(function(){
		$("input:button.hightlight3").click(function(){
			$("input:text.searchbox").caret("fox");
		});
	});
})(jQuery);
</script>

Example #6

Demonstration of selection part of the text by providing the regular expression:

>> Play with the code in a new window <<

<input type="text" class="searchengine" value="Three little pigs are living in three different house for 33 years" size="80" />
<input class="hightlight4" type="button" value="highlight number"/><br/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript">
(function($){
	$("document").ready(function(){
		$("input:button.hightlight4").click(function(){
			$("input:text.searchengine").caret(/\d+/g);
		});
	});
})(jQuery);
</script>

Example #7

Pre-processing by using caret().replace() method:

>> Play with the code in a new window <<

<input type="text" class="preprocess" value="Try to select string and type any character in this box" size="80" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript">
(function($){
	$("document").ready(function(){
		$("input:text.preprocess").keypress(function(d){
			var a=d.charCode?d.charCode:d.keyCode?d.keyCode:0;
			alert($(this).caret().replace(String.fromCharCode(a)));
		});
})(jQuery);
</script>

Example #8

<p><input type="button" class="insideFrame" value="Select the 'side' inside textbox in iframe"/></p>
<div id="ifme"></div>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript">
(function($){
	$("document").ready(function(){
        var $frame = $('<iframe style="width:200px; height:100px;">'); 
        $('#ifme').append( $frame ); 
        setTimeout( function() { 
            var doc = $frame[0].contentWindow.document; 
            var $body = $('body',doc); 
            $body.html('<p>Test inside iframe</p>');
			var ibox=$('<input type="text" size="20" value="text inside iframe"/>');
			$body.append(ibox);
			$(".insideFrame").click(function(){
				ibox.caret(/side/g);
			});
        }, 1 
	); 
})(jQuery);
</script>

jQuery Plugin Source Code

The following is the source code of the jQuery Plugin.

<script type="text/javascript">
(function($,len,createRange,duplicate){
	$.fn.caret=function(options,opt2){
		var start,end,t=this[0],browser=$.browser.msie;
		if(typeof options==="object" && typeof options.start==="number" && typeof options.end==="number") {
			start=options.start;
			end=options.end;
		} else if(typeof options==="number" && typeof opt2==="number"){
			start=options;
			end=opt2;
		} else if(typeof options==="string"){
			if((start=t.value.indexOf(options))>-1) end=start+options[len];
			else start=null;
		} else if(Object.prototype.toString.call(options)==="[object RegExp]"){
			var re=options.exec(t.value);
			if(re != null) {
				start=re.index;
				end=start+re[0][len];
			}
		}
		if(typeof start!="undefined"){
			if(browser){
				var selRange = this[0].createTextRange();
				selRange.collapse(true);
				selRange.moveStart('character', start);
				selRange.moveEnd('character', end-start);
				selRange.select();
			} else {
				this[0].selectionStart=start;
				this[0].selectionEnd=end;
			}
			this[0].focus();
			return this
		} else {
			// Modification as suggested by Андрей Юткин
           if(browser){
                if (this[0].tagName.toLowerCase() != "textarea") {
                    var val = this.val(),
					selection=document.selection,
                    range = selection[createRange]()[duplicate]();
                    range.moveEnd("character", val[len]);
                    var s = (range.text == "" ? val[len]:val.lastIndexOf(range.text));
                    range = selection[createRange]()[duplicate]();
                    range.moveStart("character", -val[len]);
                    var e = range.text[len];
                } else {
                    var range = selection[createRange](),
                    stored_range = range[duplicate]();
                    stored_range.moveToElementText(this[0]);
                    stored_range.setEndPsoint('EndToEnd', range);
                    var s = stored_range.text[len] - range.text[len],
                    e = s + range.text[len]
                }
			// End of Modification
            } else {
				var s=t.selectionStart,
					e=t.selectionEnd;
			}
			var te=t.value.substring(s,e);
			return {start:s,end:e,text:te,replace:function(st){
				return t.value.substring(0,s)+st+t.value.substring(e,t.value[len])
			}}
		}
	}
})(jQuery,"length","createRange","duplicate");</script>

Download the plugin

You can download the plugin from the latest versions of jQuery Caret (jCaret) Plugin in the following links:

• Google Code -jCaret Project: List of Download

Copyright and licensing

All the plugin source codes and the examples are copyright of C. F., Wong
Please feel free to use any code listed in this page, they are licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php