HTML5如何从文本区域中获取选定的文本

Posted

技术标签:

【中文标题】HTML5如何从文本区域中获取选定的文本【英文标题】:HTML5 how to get selected text out of a textarea 【发布时间】:2014-05-26 03:26:37 【问题描述】:

我能够通过每次记录 onselect 并存储开始和结束来从文本区域中获取突出显示的文本。然后,当我单击一个按钮时,我自己构建子字符串。难道没有更简单的方法来简单地查询选择吗?

我有点期待 html5 dom 中会有处理所有这些事情的方法,例如:

textarea.getSelectedStart() textarea.getSelectedEnd(); textArea.setSelected(start,end);

另外,有没有办法以编程方式取消选择文本区域中的文本?

我正在根据下面的第一个解决方案输入代码。这种工作,但有一个奇怪的问题:

<script language=javascript>
function replaceCLOZE(code, questionType) 
  var v = code.value;
  var s = code.selectionStart;
  var e = code.selectionEnd;
  var t = v.substr(s, e-s);
  var rep = ":" + questionType + ":="+t+"";
  code.value = v.substr(0,s) + rep + v.substr(e,v.length-e+1);


function shortAnswer(code) 
  replaceCLOZE(code, "SA");

function shortAnswerCaseSensitive(code) 
  replaceCLOZE(code, "SAC");

function multipleChoice(code) 
  replaceCLOZE(code, "MC");

文本区域实际上有属性 code.selectionStart 和 code.selectionEnd。但是上面的代码现在可以工作了,它将屏幕上突出显示的文本设置为文本区域中的第一个单词。请注意, selectionStart 仍然正确,但在 Firefox 中实际突出显示的内容是错误的。

在 Chrome 中它工作正常。也许这只是 Firefox 中的一个错误,或者是否应该采取其他措施来正确更新文本区域?

【问题讨论】:

【参考方案1】:

以下是获取 html textarea 选定文本的简单方法。仍然不清楚您想要什么,因为以下方法只会在警报中为您提供选定的文本。

<html><head>
<script>
function alertme()
var textarea = document.getElementById("textArea");  
var selection = (textarea.value).substring(textarea.selectionStart,textarea.selectionEnd);
alert (selection);


</script>

</head>
<body> 
<p><textarea class="noscrollbars" id="textArea"></textarea></p>
<button onclick="alertme()">Click me</button>
</body></html>

当您选择文本时,该按钮会提醒您选择了什么。 selectionStart 给你起点, selectionEnd 给你终点,而 substring 需要三个参数字符串,起点和终点。

【讨论】:

当我在 Firefox 中尝试此操作时,它正确地获取了 selectionStart 和 end 但随后神秘地突出显示了另一个单词。 无法理解代码,我不使用firefox,只是下载了28.0版本并将上述代码粘贴到新的html文件中,它运行良好。所以他们的代码可能有问题,否则解决方案可以完美运行,请使用'code'标签将代码放入cmets。

以上是关于HTML5如何从文本区域中获取选定的文本的主要内容,如果未能解决你的问题,请参考以下文章

从文本区域获取文本时如何保留换行符?

jQuery - 从文本区域中删除用户输入文本

在将数据输出回文本区域时,如何正确清理从文本区域接收的数据?

如何使用 PHP 从文本区域解析文本中的 \n 符号

多个文本区域上的 flex 编辑菜单操作

如何在 html 文本区域中逐行读取文本? [复制]