Highilight line in textarea
Пример подсветки текущей строки в textarea
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<!-- http://code.google.com/p/jcaret/ -->
<!--<script type="text/javascript" src="/images/wp/jquery.caret.1.02.min.js"></script>-->
<script type="text/javascript">
$(function () {
$('#data').keyup(highlightTextArea).mouseup(highlightTextArea).scroll(highlightTextArea)
})
function highlightTextArea() {
var m = $.browser.msie || $.browser.opera ? 2 : 1
var count = $('#data').caret().start
var lines = $('#data').val().split('\n')
for (var i = 0; i < lines.length; i++) {
count = count - lines[i].length - m
if (count < 0) break
}
var lineHeight = parseInt($('#data').css('line-height'))
if (isNaN(lineHeight)) lineHeight = 16
var top = i * lineHeight - $('#data').scrollTop()
top = '0 ' + parseInt(top) + 'px'
$('#data').css('background-position', top)
}
</script>
<style type="text/css">
#data {
padding: 0;
border: 1px solid #999;
font: 14px/16px Arial;
background: #fff url(z.png) repeat-x 0 0;
}
</style>
</head>
<body>
<textarea name="data" id="data" rows="10" columns="50" wrap="off">
1. line
2. line
3. line
4. line
5. line
6. line
7. line
8. line
9. line
10. line
11. line
12. line
13. line
14. line
15. line</textarea
>
</body>
</html>