Select the following Topics you are interested
Sometimes, we would like to obtain or set the caret/cursor/selection start and end postion inside a text field or a text area. This is a full-power caret plugin for handling selection and keypress event in a text field or a text area.
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 of using the caret().start and caret().end properties 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.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>
Demonstration of selection part of the text by supplying start and end information in JSON format:
>> 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.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>
Demonstration of using caret().text property 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.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>
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.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>
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.js"></script>
<script type="text/javascript">
(function($){
$("document").ready(function(){
$("input:button.hightlight3").click(function(){
$("input:text.searchbox").caret("fox");
});
});
})(jQuery);
</script>
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.js"></script>
<script type="text/javascript">
(function($){
$("document").ready(function(){
$("input:button.hightlight4").click(function(){
$("input:text.searchengine").caret(/\d+/g);
});
});
})(jQuery);
</script>
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.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>
<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.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>
The following is the source code of the jQuery Plugin.
<script type="text/javascript">
(function($){
$.fn.caret=function(options,opt2){
var start,end,t=this[0];
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.length;
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].length;
}
}
if(typeof start!="undefined"){
if($.browser.msie){
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.msie){
if (this[0].tagName.toLowerCase() != "textarea") {
var val = this.val();
var range = document.selection.createRange().duplicate();
range.moveEnd("character", val.length);
var s = (range.text == "" ? val.length:val.lastIndexOf(range.text));
range = document.selection.createRange().duplicate();
range.moveStart("character", -val.length);
var e = range.text.length;
} else {
var range = document.selection.createRange();
var stored_range = range.duplicate();
stored_range.moveToElementText(this[0]);
stored_range.setEndPoint('EndToEnd', range);
var s = stored_range.text.length - range.text.length;
var e = s + range.text.length;
}
// 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.length)
}}
}
return this;
}
})(jQuery);</script>
Click the link for downloading the plugin.
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