食譜

Examplets.org

jQuery Examplets and Examples

Select the following Topics you are interested

  1. Caret Plugin
  2. Format Plugin
  3. Table AddRow Plugin
  4. Truncator Plugin
  5. TrapKey Plugin
  6. Regular Expression plugin / Selector (regex)
  7. Output Plugin
  8. Loader Plugin
  9. Matt Glass Plugin
  10. Lens Plugin
  11. ClippedImage Plugin
  12. DefaultText Plugin
  13. Simple Tree-node
  14. Simple Tree-set
  15. Simple zoomGlass

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://www.examplet.org/jquery/caret.php

 

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 <<


Caret Position: start=, end=

<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:

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

6502 MPU and assembly


Latest Blog Articles from CloudGen wordpress blog!


Copyright 2008-2014

Cloud-Gen