jquery.caret
Version:
Get caret position and offset from inputor
246 lines (215 loc) • 6.25 kB
HTML
<html>
<head>
<title>Caret.js</title>
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.caret.js"></script>
<!-- // <script type="text/javascript" src="ckeditor/ckeditor.js"></script> -->
<!-- // <script type="text/javascript" src="http://cdn.staticfile.org/ckeditor/4.2/ckeditor.js"></script> -->
<script type="text/javascript">
$(function () {
var $input = $('#input');
var $editable = $('#editable');
function resetOffset($textField) {
var offset = $textField.caret('offset');
var position = $textField.caret('position');
resizeBox(offset, position);
return offset
}
function resizeBox (offset, position) {
$('.offset-box').css({'width': offset.left, 'height': offset.top})
$('.indicators')
.offset({left: offset.left, top: offset.top + offset.height + 2})
.find('.offset-indicator')
.html("Offset: left: " + offset.left + ", " + "top: " + offset.top + " " + "height: " + offset.height);
$('.position-box').css({'width': position.left, 'height': position.top})
$('.position-indicator')
.html("Position: left: " + position.left + ", " + "top: " + position.top + " ");
}
$input.on('focus keyup mouseup', function(){
resetOffset($input);
});
$editable.on('focus keyup mouseup', function(){
resetOffset($editable)
});
$(window).resize(function() {
if ($input.is(":focus"))
resetOffset($input);
else
resetOffset($editable);
});
$input.caret('pos', 53).focus();
// CKEDITOR.config.toolbar = [[ 'Source', '-', 'Bold', 'Italic' ]];
// CKEDITOR.replace( 'ckEditor', {
// });
// CKEDITOR.instances.ckEditor.on('instanceReady', function() {
// ifr = $('.cke_wysiwyg_frame')[0];
// $ckBody = $('body', ifr.contentDocument);
// $ckBody.on('keyup mouseup', function() {
// offset = $ckBody.caret('offset');
// resizeBox(offset);
// });
ifr = $('#iframe1')[0];
ifrBody = ifr.contentDocument.body;
ifrBody.contentEditable = true;
ifrBody.id = 'ifrBody';
ifrBody.innerHTML = 'For <strong>WYSIWYG</strong> such as <strong>ckeditor</strong>'
$(ifrBody).on('keyup mouseup', function() {
offset = $(ifrBody).caret('offset', {iframe: ifr});
offset.left += $(ifr).offset().left;
offset.top += $(ifr).offset().top;
position = $(ifrBody).caret('position', {iframe: ifr});
resizeBox(offset, position);
});
});
</script>
<style type="text/css">
html, body {
background:#F9F9F9;
padding: 0;
margin: 0;
font: 14px/1.6 "Lucida Grande", "Helvetica", sans-serif;
color: #333;
}
h1,h2,h3,h4 {
font-family: 'PT Sans', sans-serif;
line-height: 40px;
color: inherit;
font-weight: bold;
margin: 10px 0;
text-rendering: optimizelegibility;
}
h2,h3 {
color: gray;
}
header {
margin-top:70px;
margin-bottom: 50px;
}
header h1 {
text-align: center;
font-size:56px;
}
h1 i {
color: rgb(182, 180, 180);
font-style: normal;
font-weight: normal;
}
span {
position: absolute;
display: inline-block;
}
a {
color: #4183C4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
strong {
color: #424242;
}
.wrapper {
width: 55%;
padding: 20px;
margin: 0 auto;
}
@media only screen and (max-width: 600px) {
.wrapper {
width: 95%;
}
}
@media only screen and (max-width: 1120px) {
.wrapper {
width: 80%;
}
}
.inputor {
overflow: auto;
height: 160px;
width: 90%;
border: 1px solid #dadada;
border-radius: 4px;
padding: 5px 8px;
outline: 0 none;
margin: 10px 0;
background: white;
}
.inputor:focus {
border: 1px solid rgb(6, 150, 247);
}
.github {
text-align: center;
}
footer {
margin: 30px 0;
}
.offset-box {
border-right: 2px dashed gray;
border-bottom: 2px dashed gray;
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
.offset-box > .position-box {
border-right: 2px dashed rgb(6, 150, 247);
border-bottom: 2px dashed rgb(6, 150, 247);
position: absolute;
bottom: 0;
right: 0;
z-index: 10000;
}
.indicators > .offset-indicator {
border: 1px solid gray;
position: absolute;
z-index: 999;
padding: 0 3px;
border-radius: 3px;
}
.indicators > .position-indicator {
border: 1px solid rgb(6, 150, 247);
position: absolute;
bottom: -50px;
padding: 0 3px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="container wrapper">
<!-- <a id="github" href="https://github.com/ichord/Caret.js" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0; z-index:999" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> -->
<header>
<h1>Caret<i>.js</i></h1>
</header>
<div id="main">
<h2>Textarea</h2>
<textarea id="input" class="inputor">
Type something here for fun!!
</textarea>
<h2>ContentEditable</h2>
<div id="editable" class="inputor" contentEditable="true">
Hello, some <b>bold</b> and <i>italic</i> and <b><i>bold</i></b> text
</div>
<h2>iframe body</h2>
<iframe id="iframe1" src="" class="inputor">
</iframe>
<div class="offset-box">
<div class="position-box"></div>
</div>
<div class="indicators">
<div class="offset-indicator"></div>
<div class="position-indicator"></div>
</div>
<footer>
<h2>
-> <a class="github" href="https://github.com/ichord/Caret.js">Fork me on GitHub!</a>
</h2>
</footer>
</div>
</div>
</body>
</html>