Question

如果我有这样的textarea：

<textarea id="foo" cols=80 wrap="hard"></textarea>

有没有办法，使用JavaScript来获取硬包装文本？

我尝试过显而易见的$("#foo").val()，但会返回未打开的文字。

例如，如果textarea是：

<textarea id="bar" cols=5 wrap="hard">a b c d e f</textarea>

浏览器将文本换行到：

a b c
d e f

我可以通过某种方式获取该文字 - "a b c\nd e f"（由于wrap=hard，这是<textarea…在{{1}中提交时将发送的文字}}）。

Answer 1

由于格式化是由提交时的浏览器完成的，因此您最好的选择是让浏览器提交，但要提交到您选择的位置，例如iframe，您可以从表单或网址参数中提取格式化文本。

<html><body>
    <script type="text/javascript">
        function getURLParameter(qs, name)
        {
          var pattern = "[\\?&]"+name+"=([^&#]*)";
          var regex = new RegExp( pattern );
          var res = regex.exec( qs );
          if (res == null)
            return "";
          else
            return res[1];
        }
        function getHardWrappedText(){
            if (top.location.href !== window.location.href) return;
            var frm_url = document.getElementById('ifrm').contentDocument.URL;
            if (frm_url.indexOf('http') < 0) return;
            var text = unescape(getURLParameter(document.getElementById('ifrm').contentDocument.URL, 'bar')).replace(/\+/g,' ');
            alert(text)
        }
    </script>
    <form name="main" method="get" target="ifrm">
        <textarea id="bar" name="bar" cols=5 wrap="hard">a b c d e f</textarea>
        <input type="submit">
    </form>
    <iframe id="ifrm" name="ifrm" onload="getHardWrappedText();" style="display:none;"></iframe>
</body></html>

Answer 2

编辑2

我可以提出的唯一解决方案是创建一个带有名称的隐藏iframe，并将表单提交到该框架。然后，iframe可以通过window.parent与其父级进行通信，并提供返回的文本（包括新行，因为表格通常已提交..）

当然，如果你愿意，可以通过脚本调用提交。

以下我有罢工，因为它不适用于这种情况.. ~~这样做的一般方法是~~

alert( $('<div/>').append($('#foo').clone()).html() );

这是做什么的

创建一个新的div（在内存中）

$('<div/>')

克隆所需元素 #foo 并将其附加到我们创建的div

.append( $('#foo').clone() )

提取内部html（但是因为我们正在处理我们围绕元素的div，所以我们得到了元素html ..

.html()

<强> [编辑]
显然我误解了..要获取元素的内部文本，请使用.text（）方法所以

$('#foo').text();

<击>

Answer 3

我假设您知道文本区域的尺寸（如果没有，您可以从DOM中获取它们）。

用它来分割字符串。转到第x个字符（在您的示例中为第5个字符），并查看下一个字符是否为空格。如果是这样（或者前一段中没有空格），这就是你拆分的地方。否则，您找到前面的空格并在那里拆分。

在函数中包装它，你可以添加一些递归来找到第n行。

Answer 4

我认为不可能开箱即用您可以使用textarea的cols值自行换行。从HTML的角度来看，textarea中的文本没有被包装。它就是为了让你能够更好地阅读它而展示它的方式。

PS。如果您使用的是jQuery，则应使用$('#foo')代替$('[id=foo]')选择器，因为它更快（更短）。

Answer 5

这有点像黑客攻击，但你可以在服务器上创建一个脚本，打印出以某种格式发布到它的任何内容（JSON，纯文本，适合你的任何格式），并通过AJAX将textarea发布到该脚本你需要得到它的内容。

Answer 6

使用现代浏览器，可以在 FormData 中找到换行文本：

new FormData(document.querySelector('form')).get('name')

这似乎与提交的内容相符（如图所示的包装或 the unwrapped value）。

HTML textarea：使用JavaScript来获取包装文本？

6 个答案: