Question

我有一个TEXTAREA控件（ID =＆＃34; taCode＆＃34;），maxlength = 400，预先填充了400个空格。

我在使用 Javascript 强制插入模式（替换）时将文本输入textarea：

var input = document.getElementById("taCode");
input.addEventListener('keypress', function(){
    var s = this.selectionStart;
    var e = this.selectionEnd;
    this.value = this.value.substr(0, s) + this.value.substr(e + 1);

    if (this.value.length < 399)
    {
        this.value += new Array(399-this.value.length).join(' ');
    }

    this.selectionEnd = this.selectionStart = s;
}, false);

HTML ：

<TEXTAREA ID="taCode" COLS="80" ROWS="5" MAXLENGTH="400" style="overflow:hidden">                                                                                                                                                                                                                                                                                                                                                                                                                </TEXTAREA>

使用桌面和鼠标一切正常，但是尝试使用移动设备（Iphone）将光标放在TEXTAREA中失败（编辑：有时将光标放在第一行上）并且没有任何内容可以输入到字段中，除了在第一行。想知道如何让它适用于所有线路的手机吗？

测试：http://artificial.se/ta.html

Answer 1

由于空间原因，iPhone中的第一行已经完全填充。因此，当您将光标放在那里并尝试键入时，它会移动到下一行，以便容纳所有由您预先填充的空间。如果您清除这些空间，并尝试在iPhone上键入或减少空格的数量，并尝试它。它肯定会工作。如果没有，那么将word-break：break-word属性添加到textarea元素以使其工作。

Answer 2

尝试类似：

area.addEventListener("input", function(e) {
    const caretIndex = area.selectionStart;
    const content = area.value;
    const newContent = str.slice(0, caretIndex) + e.key + str.slice(4);
    area.value = newContent;
});

这可能还需要一点工作。输入/更改/ keydown的某些组合应该有效。我还建议将空格数量减少到需要的数量，然后在使用输入的值时用一个额外的空格填充结尾。

Answer 3

可能你可以使用keydown事件（对不起我只是想评论，但我的声誉很低）

Answer 4

我建议如果你想要附加空格你可以在表单提交中附加剩余空格，可以避免使用js，并且在用户填写输入字段后会更好。

无法将光标放在移动设备上填充空白的TEXTAREA上

4 个答案: