如何在js中获取当前textArea有多少行

Posted 2023-05-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在js中获取当前textArea有多少行相关的知识，希望对你有一定的参考价值。

我想做动态的显示textarea的滚动条，但是需要实时获取textarea有多少行，怎么写

监听回车键是否按下应该就可以了

下面写了个简单的例子
<body>
<script>
function handleRowNum(event,id)
var code=null,
target=document.getElementById(id);
//如果是IE
if(window.event)
code=window.event.keyCode;

//如果是其他
else if(event.which)
code=event.which;

//按下回车键
if(code==13)
target.value=parseInt(target.value)+1;

</script>
<textarea wrap="off" onkeypress="handleRowNum(event,'num')" style="width:280px;height:180px;overflow:auto"></textarea>
<input type="text" id="num" size="3" value="0" readonly/>
</body> 参考技术A 获取不了，你的textare的行数，和你的textarea的样式有很大的关系，已经你的textarea在不同的浏览器会出现可以拉伸和缩短的现象。

本回答被提问者采纳

如何在textarea中获取选定的文本？ [复制]

【中文标题】如何在textarea中获取选定的文本？ [复制]【英文标题】：How to get selected text in textarea? [duplicate] 【发布时间】：2010-10-17 13:30:50 【问题描述】：

我正在尝试制作自己的 WYSIWYG 编辑器。有什么办法，如何获取用户在 textarea 中选择的文本？

例如，如果用户选择了某个单词然后单击按钮，我如何找出选择了哪个文本？

我正在使用 jQuery。

【问题讨论】：

看看这个问题：***.com/questions/401593/… 【参考方案1】：

试试 jquery-fieldselection 插件。

您可以从here 下载它。也有例子。

【讨论】：

在 Internet Explorer 7 中不适合我。该插件中的函数replaceSelection 在 Chrome 和 Firefox 中对我不起作用。【参考方案2】：

getSelection()

这会因浏览器而有所不同，请参阅此处了解据称在大多数情况下都可以使用的功能： http://snipplr.com/view/775/getselection/

【讨论】：

如何在特定的textarea 元素上使用此功能？以上代码在火狐浏览器（61.0.1）中不起作用@tpdi【参考方案3】：

不同浏览器的处理选择不同：

var userSelection;
if (window.getSelection) 
    userSelection = window.getSelection();

else if (document.selection)  // Opera
    userSelection = document.selection.createRange();

这给了你一个范围对象。每个范围代表一个选择（使用控制/命令键可以进行多个活动选择）。

您现在拥有的范围对象类型取决于浏览器。对于 IE，它是一个 Text Range 对象；对于其他人，它是一个选择对象。要将 Selection 对象转换为文本范围，可以调用 getRangeAt；对于 Safari，您需要构建：

var range;
if (userSelection.getRangeAt)
    range = userSelection.getRangeAt(0);
else  // Safari
    range = document.createRange();
    range.setStart(userSelection .anchorNode, userSelection.anchorOffset);
    range.setEnd(userSelection.focusNode, userSelection.focusOffset);

范围对象为您提供选择的开始和结束 dom 元素以及文本偏移量。

有关范围对象的更多信息，请访问quirksmode.org here

如果您使用的是 jQuery，您可能需要查看 Batiste Bieler 的 light weight jQuery RTE Plugin。它可能足以满足您的需求，或者至少可以为您提供一些帮助。

【讨论】：

非常有用且内容丰富的答案。【参考方案4】：

window.getSelection().toString() 为我使用 Chrome，但 not Firefox。

使用 Firefox 获取 <textarea> 中的选定内容：

function getSel() // javascript

    // obtain the object reference for the <textarea>
    var txtarea = document.getElementById("mytextarea");
    // obtain the index of the first selected character
    var start = txtarea.selectionStart;
    // obtain the index of the last selected character
    var finish = txtarea.selectionEnd;
    // obtain the selected text
    var sel = txtarea.value.substring(start, finish);
    // do something with the selected content

您也可以使用activeElement 代替getElementById。

参考：

textarea document

【讨论】：

window.getSelection().toString() 做同样的事情，你不需要知道 textarea 的 id。您不能同时在不同的文本区域中进行多项选择。 @DanDascalescu 我之前和现在都试过了。它适用于 Chrome，但似乎不适用于 FireFox。正确 - 原来 there is a Firefox bug filed in 2001 关于 window.getSelection() 在 textareas 中不起作用！确实，Firefox 中存在一个错误，该错误早在 2001 年就已提交（！）。我在my answer 中提到过。【参考方案5】：

一个小函数，它将获取文本区域或输入元素的选定字符串/文本：

function getInputSelection(elem)
 if(typeof elem != "undefined")
  s=elem[0].selectionStart;
  e=elem[0].selectionEnd;
  return elem.val().substring(s, e);
 else
  return '';

请注意，上面的代码需要 jQuery 才能工作。获取id为abc123

的输入元素的选定字符串的示例

getInputSelection($("#abc123"));

上述函数将返回选定的字符串。如果用户没有选择字符串，则返回null。

如何在js中获取当前textArea有多少行

如何在textarea中获取选定的文本？ [复制]

更多示例