HTML：IOS-デバイスにコピー可能読み取り専用テキストエリアにする方法

Question

どのように私は、iOSデバイス上の-textareaとinput type="text"highlightableとコピー可能を作るのですか？

これは動作しません：

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

どちらも行います。

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

EDIT：テキストエリアは常に更新されているので、それの一回限りの変換はしません作業。

テキストエリアの内容はHTMLでもかまいません。ページ上のすべての読み取り専用テキストエリアを見つけ、読み取り専用フィールドの代わりに、内容をdiv要素をレンダリングすることができhttp://jsfiddle.net/sebnilsson/jfvWZ/

Answer 1

一つの解決策：

は、私が上でこれをテストしJSFiddleを持っています。私はこれを実証するために非常にシンプルな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').val('test').trigger('textareachange'); 

のために、より広範な例では、などのスタイリング上の例

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

Answer 2

とここにあります私は私の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

Answer 3

上のテキストを選択します。

以下は、まともな、正しい、またはセマンティックな選択肢があるかどうかはわかりませんが、それは私のために働いています。

私は単純にtextareaをdiv readonlyに変更しました。同じスタイルが適用されました。

JavaScriptの1つの欠点は、this ['myForm']でdivをターゲットできないことです。 DOMのform要素の子ではないようです。

代わりにidで要素を取得し、textareaのように値を設定するのではなく、innerHTMLを設定する必要がありました。

これはIpad 1 IOS5とIphone 4s IOS7で動作しました。これで、クリップボードにテキストを選択してコピーできるようになりました。