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

Question

我有一个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

Answer 1

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