Usages and examples

Usages and examples

Note: A list of examples can be found in http://examplet.buss.hk/jquery/caret.php

A. To obtain the starting position of caret:
caret().start
<input type="text" class="sensor" size="30" /><br/>
Caret start=<span class="caretStart"></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);
}).keypress(function(){
$("span.caretStart").text($(this).caret().start);
}).mousemove(function(){
$("span.caretStart").text($(this).caret().start);
});
});
})(jQuery);
</script>

<textarea class="sensor" class="height:200px;width:300px;"></textarea><br/>
Caret start=<span class="caretStart"></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(){
$("textarea.sensor").keydown(function(){
$("span.caretStart").text($(this).
caret().start);
}).keypress(function(){
$("span.caretStart").text($(this).
caret().start);
}).mousemove(function(){
$("span.caretStart").text($(this).
caret().start);
});
});
})(jQuery);
</script>

B. To obtain the ending position of caret:
 caret().end

<input type="text" class="sensor" size="30" /><br/>
Caret 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.caretEnd").text($(this).caret().end);
}).keypress(function(){
$("span.caretEnd").text($(this).caret().end);
}).mousemove(function(){
$("span.caretEnd").text($(this).caret().end);
});
});
})(jQuery);
</script>
<textarea class="sensor" class="height:200px;width:300px;"></textarea><br/>
Caret 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(){
$("textarea.sensor").keydown(function(){
$("span.caretEnd").text($(this).caret().end);
}).keypress(function(){
$("span.caretEnd").text($(this).caret().end);
}).mousemove(function(){
$("span.caretEnd").text($(this).caret().end);
});
});
})(jQuery);
</script>


C. To obtain the content of selection:
 caret().text
  • example
<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>


D. To obtain the selection object:
caret()
  • example
<input type="text" class="sensor" size="30" /><br/>
Selection: <span class="caretObject"></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.caretObject").text($(this).caret());
}).keypress(function(){
$("span.caretObject").text($(this).caret());
}).mousemove(function(){
$("span.caretObject").text($(this).caret());
});
});
})(jQuery);
</script>


E. To highlight text by specifying starting and ending position:
caret(start,end)
  • example
<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>


F. To highlight text by specifying a position object:
caret({start: start, end: end})
  • example
<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({start:0,end:5});
});
});
})(jQuery);
</script>


G. To highlight text by specifying a keyword:
caret('keyword')
  • example
<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>


H. To highlight text by specifying a regular expression:
caret(/regex / [i] [g] [m])
  • example
<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>

Comments