【发布时间】：2019-12-05 19:25:21
【问题描述】：
大家好，我正在尽力弄清楚如何在 textarea 字段中获取突出显示的单词的 X/Y。
这是我当前的代码：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
var X = 0;
var Y = 0;
function selectHTML() {
try {
if (window.ActiveXObject) {
var c = document.selection.createRange();
return c.htmlText;
}
X = getSelection().getRangeAt(0).endOffset;
Y = getSelection().getRangeAt(0).startOffset;
w.surroundContents(nNd);
return nNd.innerHTML;
} catch (e) {
if (window.ActiveXObject) {
return document.selection.createRange();
} else {
return getSelection();
}
}
}
function FindTextInsideField() {
var str = document.getElementById("FindText").value;
var supported = false;
var found = false;
if (window.find) {
supported = true;
found = window.find(str);
let pos = document.getElementById("FindText").value.indexOf(str);
if (pos >= 0) {
document.getElementById("FindText").setRangeText(str, pos, pos + 4, "select");
document.getElementById("FindText").focus();
}
$('#FindText').val("");
} else {
if (document.selection && document.selection.createRange) {
var textRange = document.selection.createRange();
if (textRange.findText) {
supported = true;
if (textRange.text.length > 0) {
textRange.collapse(true);
textRange.move("character", 1);
}
found = textRange.findText(str);
if (found) {
textRange.select();
}
}
}
$('#FindText').val("");
}
if (supported) {
if (!found) {
alert("The following text was not found:\n" + str);
$('#FindText').val("");
}
} else {
alert("Your browser does not support this example!");
$('#FindText').val("");
}
}
function findXY() {
var mytext = selectHTML();
$('#_findXY').val("X = " + X + " Y = " + Y);
}
</script>
</head>
<body>
<textarea id = "paragraph_text" name = "paragraph_text" cols = "100" rows = "30" > Lorem ipsum dolor sit amet, eam iusto regione at.Mei id clita legendos.His ipsum neglegentur id, elit oblique no eos.Eum at clita eruditi.Vix quem hinc ex, meliore deserunt vix id, ei error ludus impetus ius.At evertitur elaboraret mel, sonet dolorum repudiandae mea at.
An iusto menandri repudiare mel, eu iisque definiebas pri, semper convenire eam ne.In ius percipit consequat.Ut sumo offendit quo.In duo epicuri nostrum eligendi, essent regione sed no.
In exerci doming splendide sit, mel omnes delicatissimi ei, at virtute vulputate efficiantur his.Quo possim civibus eu, hinc soluta ius ex.Ea quem dolor veniam mel.Sea ex paulo labores laboramus, te illud ludus mel.
Quo vidit nostrum postulant no, paulo doctus diceret vim et, sumo nullam reprehendunt in mei.Eu vis amet commune delicatissimi.Falli impedit in sea.Soluta appareat phaedrum ea sea.Sea facete postulant necessitatibus at, sea veri probo no.
---------------------------------------------------------------------------------------------- -
</textarea >
<br/>
<input type = "text" id = "FindText" value = "percipit" size = "20" / >
<button onclick = "FindTextInsideField();" > Find! </button>
<input type = "text" style = "margin-left: 30px;" id = "_findXY" value = "" size = "20" readonly />
<button onclick = "findXY();" > Get X / Y cords </button>
</body>
</html>
突出显示这个词就可以了。您将要搜索的任何单词放在文本区域内。但是，一旦您按下 Get X/Y 线，它就会显示 X = 5 Y = 5，这是不正确的，因为它应该在 X = ~250px 中Y = ~80px 根据codePen 代码示例的竞技场。
任何人都知道如何解决这个问题，或者它甚至可以解决吗？
【问题讨论】：
-
如果我的回答在某些方面不足，您介意接受我的回答或发表评论吗？这是一个有趣的调查和回答。好问题。
标签： javascript dom textarea