jquery-textrange
Version:
A jQuery plugin for getting, setting and replacing the selected text in input fields and textareas.
106 lines (94 loc) • 3.97 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>jquery-textrange</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-textrange.js"></script>
<style>
body, h1 { margin:0; }
body { background:#0f0f0f; font:normal 14px Georgia, "Times New Roman", Times, serif; width:700px; margin:0 auto; }
body > div { float:left; background:#fff; padding:20px; border-left: 4px solid #fa4500; }
a, a:link, a:visited, a:hover, a:active, a:focus { text-decoration:none; color:#fff; }
a:hover, a:active, a:focus { text-decoration:underline; }
h1 { border-left: 4px solid #fa4500; padding:0 0 4px 9px; }
body > div, h1 { margin:30px 0 0 30px; }
span.description { display:block; margin:2px 0 0 46px; }
span.copyright { float:right; color:#fff; margin-right:30px; }
#info { width:200px; }
#info code { display:block; margin:10px 0; }
#info .line { display:block; }
#info .property { margin-left:30px; }
#textarea { display:block; width:300px; height:90px; }
#char-start, #char-end { width:40px; }
</style>
<script>
$(document).ready(function() {
var orange = false;
setInterval(function() {
orange = !orange;
$('h1').css('border-color', orange ? 'transparent' : '#fa4500');
}, 500);
$('#textarea').bind('updateInfo keyup mousedown mousemove mouseup', function(event) {
if (document.activeElement !== $(this)[0]) {
return;
}
var range = $(this).textrange();
$('#info .property').each(function() {
if (typeof range[$(this).attr('id')] !== 'undefined') {
if ($(this).attr('id') === 'text') {
range[$(this).attr('id')] = range[$(this).attr('id')].replace(/\n/g, "\\n").replace(/\r/g, "\\r");
}
$(this).children('.value').html(range[$(this).attr('id')]);
}
});
});
$('#console-log').click(function() {
var obj = {};
$('#info .property').each(function() {
var value = $(this).children('.value').html();
obj[$(this).attr('id')] = isNaN(value) || value == '' ? value : parseInt(value);
});
console.log(obj);
return false;
});
$('#selection-set').click(function() {
$('#textarea').textrange('set', $('#char-start').val(), $('#char-end').val()).trigger('updateInfo').focus();
});
$('#selection-replace').click(function() {
$('#textarea').textrange('replace', $('#replace-text').val()).trigger('updateInfo').focus();
});
});
</script>
</head>
<body>
<h1><a href="https://github.com/dwieeb/jquery-textrange/">jquery-textrange</a></h1>
<span class="copyright"><a href="https://www.dwieeb.com">created by Daniel Imhoff</a></span>
<span class="description"><a href="https://github.com/dwieeb/jquery-textrange/blob/1.x/README.md">See README.md for all features and documentation.</a></span>
<div id="fields">
<textarea id="textarea" name="textarea">Some more content.
Isn't this cool?
This time with a few lines of content.
Yaaay.</textarea>
</div>
<div id="info">
<strong>Object returned:</strong>
<code>
<span class="line">{</span>
<span id="position" class="property line">position: <span class="value">0</span>,</span>
<span id="start" class="property line">start: <span class="value">0</span>,</span>
<span id="end" class="property line">end: <span class="value">0</span>,</span>
<span id="length" class="property line">length: <span class="value">0</span>,</span>
<span id="text" class="property line">text: "<span class="value"></span>"</span>
<span class="line">}</span>
</code>
<input type="button" id="console-log" name="console-log" value="console.log() this object">
</div>
<div>
Select a substring starting at <input type="text" id="char-start" name="char-start" value="30"> with a length of <input type="text" id="char-end" name="char-end" value="15"> <input type="button" id="selection-set" name="selection-set" value="Go!!">
</div>
<div>
Replace the selected text with: <input type="text" id="replace-text" name="replace-text" value="some text"> <input type="button" id="selection-replace" name="selection-replace" value="Go!!">
</div>
</body>
</html>