如何限制 textarea 并从 textarea 移动到另一个答案

【问题标题】：how to limit textarea and move from extarea to another如何限制 textarea 并从 textarea 移动到另一个
【发布时间】：2014-09-12 13:41:48
【问题描述】：

我正在构建一个“所见即所得”，但我遇到了一个小问题：

我有 2 个文本区域。

我想限制第一个的写入量，写完后自动在第二个textarea继续写入。

就像在“单词”中一样：

http://postimg.org/image/5cuoxf6c9/

我正在使用 execCommand，所以我不希望它依赖于字体大小/空白等...

【问题讨论】：

你的密码是什么？您是否期望人们为您提供完整的解决方案？

标签： javascript css forms textarea wysiwyg

【解决方案1】：

试试这个：

<textarea id="firstTextArea" maxlength="100" />
<textarea id="secondTextArea" />

使用此脚本：

<script>
    $("#firstTextArea").on("keypress", function(){
        if($("#firstTextArea").length == 100){
            $("#secondTextArea").focus();
        }
    }
<script>

【讨论】：

差不多。焦点必须在 secondTextarea
不起作用。而且我希望就像在 word 中一样，如果我在整页中插入单词，页面上的最后一个单词应该继续到下一页
你甚至使用 jquery 吗？我的意思是什么在这个 sn-p 中不起作用？
它永远不会进入这个循环： if($("#firstTextArea").length == 100) 并且即使它确实有效，id 也不会像 word 中那样具有效果：当我在整页中插入文本，页面中的最后一个单词应该转到下一个文本区域。它不一定是“焦点”

【解决方案2】：

应该是这样的。每次在文本区域中键入时检查行数。如果行数大于最大行数，则将焦点设置在其他文本区域。

我没试过

String.prototype.lines = function() { return this.split(/\r*\n/); }
String.prototype.lineCount = function() { return this.lines().length; }

var maxLineCount = ...;

$('#textarea1').bind('input propertychange', function(e)
{
    if((this).val().lineCount > x)
    {
        e.preventDefault();
        $('#textarea2').focus();
    }
});

编辑： 另一种方法是使用一个插件，在您输入文本时扩展您的文本区域。并设置最大高度。达到最大高度后，关注其他文本区域

【讨论】：

不起作用。而且我希望就像在 word 中一样，如果我在整页中插入单词，页面上的最后一个单词应该继续到下一页

【解决方案3】：

您可以在文本区域上使用 maxlength 属性：

<textarea maxlength="number">

编辑：

你可以做这样的事情来包括输入字符

<textarea id="mytext" rows="4" cols="50" onkeyup="LimitCharacters(this);" >
</textarea>
<textarea id="mytext2" rows="4" cols="50">
</textarea>
<script>
function LimitCharacters(textArea) {
    var chars = textArea.value.length;
    if (chars > 10) {
        var words = textArea.value.split(" ");
        var lastWord = words.pop();
        textArea.value = words.join(" ");
        document.getElementById("mytext2").focus();
        document.getElementById("mytext2").value = lastWord;
    }
}
</script>

【讨论】：

快到了，就像在 Word 中一样，如果我在整页中插入单词，页面上的最后一个单词应该会转到下一页
好的，我更新了答案和小提琴。这是你要找的吗？ jsfiddle.net/fu17eys4/1
谢谢，它几乎就在那里，虽然它仍然有错误。最后一个词不一定是我写的最后一个词，而是textarea中的最后一个词。此外，随着我写的越多，更多的单词应该移到下一个文本区域。

【解决方案4】：

I have tested it and working fine. 
below is script
<script>
function autotab(current,to){
    if (current.getAttribute && 
      current.value.length==current.getAttribute("maxlength")) {
        to.focus() 
        }
}
</script>

here is HTML ... please dont miss form tag with name attr.
<form name="note">
<textarea name="phone0" size=200 onKeyup="autotab(this, document.note.phone1)" maxlength=10></textarea>
<textarea name="phone1" size=200 onKeyup="autotab(this, document.note.phone2)" maxlength=10></textarea>
<textarea name="phone2" size=200 maxlength=10></textarea>
</form>

【讨论】：

这很好，但还不是我想要的。您仍然可以在侧面获得滚动条（例如，如果您连续写一个字母。）在其中一个文本区域中写入完成后，您无法添加字符，您应该可以这样做，并且这样，textarea 中的最后一个单词将被推送到下一个 textarea。