HTML:如何在iOS设备中创建只读文本区域

Question

如何做一个textarea和input type="text" 高亮和可复制的iOS设备？

这不起作用:

<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/

Answer 1

一种解决方案可以是在页面上找到所有只读textareas并使用内容代替只读字段来呈现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/