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

Posted 2023-05-07

【中文标题】无法从移动设备将光标放在填充空格的 TEXTAREA 上

【英文标题】：Cannot place cursor on whitespace-filled TEXTAREA from mobile

【发布时间】：2018-02-19 19:10:44

【问题描述】：

我有一个 TEXTAREA 控件 (ID="taCode")，maxlength=400，预填充了 400 个空格。

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

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

【问题讨论】：

this.focus() 不起作用吗？

那应该去哪里？我猜来自手机的“点击”不算作“按键”并触发我的功能？

我想这可能是你的答案***.com/questions/5797539/…

现在试过了，没有任何变化.. 无论我在 TEXTAREA 内的哪个位置单击，光标都会在第一行的最后一个位置结束，我无法在其中输入任何内容。

尝试将事件从keypress更改为keyup

【参考方案1】：

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

【讨论】：

word-break:break-word 不起作用，我在 textarea 中预填充了空格是有原因的。它可以在没有预先填充 400 个空格的情况下工作，但这不是我正在寻找的解决方案。我需要让它工作，将光标放置在一个充满空格的行“内部”。

将它与 textarea 上的其他属性一起使用：textarea white-space: pre-wrap; word-wrap：断词； word-break: break-all;

【参考方案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;
);

这可能还需要一些工作。输入/更改/按键的某种组合应该可以工作。我还建议将空格数比您需要的少一，然后在您使用输入的值时用额外的空格填充末尾。

【讨论】：

不确定您是否建议在我的功能之外使用您的功能或代替。我尝试了这两种组合都没有成功：artificial.se/ta2.html 仍然不能将光标放在除第一个使用 iPhone/Safari 之外的任何其他行上。我目前正在尝试使用 5 个单独的单行文本区域创建一种解决方法，其中一个可以使用键盘上的箭头键 UP/DOWN 在它们之间“跳转”。

【参考方案3】：

也许您可以为此使用 keydown 事件（对不起，我只是想发表评论，但我的声誉很低）

【参考方案4】：

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

【讨论】：

你说得对，但它实际上是用户界面——能够将光标放在任何地方并在那里添加内容（类似于绘画应用程序）——我正在尝试创建/模仿。跨度>