Старая тема Позиция каретки в пикселях (Textera)
Была такая тема, http://javascript.ru/forum/search.php?searchid=61543
вопрос похожий, не работает в IE Что делать? <html> <head> <title>auto</title> <script> window.onload = function(){ function $(id) { return document.getElementById(id); } var autocomplete = $('autocomplete'), editor = $('editor'), mirror = $('mirror'); var words = [ 'conus' ], match = ''; function reflect (textarea, position) { var text = textarea.value, span = document.createElement('span'); span.innerHTML = text.substr(position); text = text.substr(0, position); mirror.innerHTML = ''; mirror.appendChild(document.createTextNode(text)); mirror.appendChild(span); return { x: span.offsetLeft - mirror.offsetLeft, y: span.offsetTop - mirror.offsetTop }; } function getMatched (match) { if (!match) { return []; } return words.filter(function(value) { return value.indexOf(match) === 0; }); } function count (occurence, string) { return string.split(occurence).length - 1; } editor.addEventListener('keyup', function (e) { var character = String.fromCharCode(e.keyCode).toLowerCase(); if (e.keyCode === 16) { return; } if (e.keyCode === 189) { character = '_'; } if (e.keyCode === 8) { match = match.substr(0, match.length - 1); } else if (character.match(/[^a-z\_0-9]+/i)) { match = ''; } else { match += character; } var matches = getMatched(match); if (matches.length) { autocomplete.innerHTML = matches.join('<br/>'); autocomplete.style.display = 'block'; var position = reflect(this, this.selectionStart - match.length); autocomplete.style.left = editor.offsetLeft + position.x + 'px'; autocomplete.style.top = editor.offsetTop + 14 + position.y + 'px'; } else { autocomplete.style.display = 'none'; } }); } </script> </head> <body> <div id="wrapper"style="position: relative; top: 0px; left: 0px; height: 200px; width: 400px;"> <div id="autocomplete" style="background-color: #fff; border: 1px solid #ccc; font-size: 14px; position: absolute; top: 0px; left: 0px; display: none; padding: 4px;"></div> <textarea id="editor" style="font-family: monospace; font-size: 12px; line-height: 100%; white-space: pre; padding: 8px; height: 200px; width: 400px;"></textarea> <div id="mirror" style="font-family: monospace; font-size: 12px; line-height: 100%; white-space: pre; padding: 8px; height: 200px; width: 400px; visibility: hidden;"></div> </div> </body> </html> |
пример взят с http://jsfiddle.net/volter9/gdd6ur0w/
|
Часовой пояс GMT +3, время: 04:41. |