Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Старая тема Позиция каретки в пикселях (Textera) (https://javascript.ru/forum/events/59978-staraya-tema-poziciya-karetki-v-pikselyakh-textera.html)

Conus 05.12.2015 12:58

Старая тема Позиция каретки в пикселях (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>

Conus 05.12.2015 15:03

пример взят с http://jsfiddle.net/volter9/gdd6ur0w/


Часовой пояс GMT +3, время: 05:39.