6

如何在 iOS 设备上制作可突出显示textarea和可复制的内容？input type="text"

这不起作用：

<textarea readonly="readonly">Totally readonly, cannot be copied</textarea>

也没有：

<textarea disabled="disabled">Totally readonly, cannot be copied</textarea>

编辑：文本区域不断更新，因此一次性转换它是行不通的。

textarea 的内容也可以是 HTML。

我有一个 JSFiddle，我对此进行了测试：http: //jsfiddle.net/sebnilsson/jfvWZ/

4

3 回答 3

6

一种解决方案可能是找到页面上的所有只读文本区域，并呈现一个包含内容的 div 来代替只读字段。我写了一些非常简单的 JS 来演示这一点。

类似的东西

$('textarea[readonly]').removeAttr('readonly').each(function () {
    var $this = $(this);
    $this.hide().after('<div data-textarea="' + $this.attr('id')
        + '" class="textarea">' + $this.val() + '</div>');
}).on('textareachange', function () {
    var $this = $(this);
    $('[data-textarea="' + $this.attr('id') + '"]').html($this.val());
});

您还需要在更新 textarea 值时触发该事件。例如

$('textarea').val('test').trigger('textareachange');

这里有一个更广泛的示例，其中包含有关样式等的示例。

http://jsfiddle.net/ssfUx/3/

于 2013-03-20T08:38:31.420 回答
0

我已经成功地在我的 iPhone 上选择了一些文本，但需要多次尝试。

<textarea readonly onfocus="this.blur();">Totally readonly, CAN BE copied</textarea>

最后一个：http: //jsfiddle.net/jfvWZ/6/

<div>
    <label>Plain div</label><br />
    <div id="plain-div" onFocus="this.blur();">
        Plain div
    </div>
</div>

易于在 iPhone 上选择文本

于 2013-03-20T12:55:36.137 回答
0

同样遇到了这个问题。

不确定以下是否是一个体面、正确或语义的替代方案，但它对我有用。

我只是将 textarea 更改为只读的 div，应用相同的样式。

一个缺点是在 JavaScript 中我无法使用 this['myForm'] 来定位 div。它似乎不是 DOM 中表单元素的子元素。

相反，我必须通过 id 获取元素并将其设置为 innerHTML，而不是像 textarea 那样设置值。

它适用于 Ipad 1 IOS5 和 Iphone 4s IOS7 我现在可以选择文本并将其复制到剪贴板。

于 2014-06-10T09:49:30.423 回答