html5
iphoneでbrタグをまたいで文章を選択すると、希望の文字列より広範囲で四角く選択されてしまう。これはiphoneの使用のよう。
この問題はbrタグを使わず、CSSで改行すると解決できる。
html
-----------------------------
<br>
-----------------------------
↓↓↓↓↓
html
-----------------------------
<span class="br"></span>
-----------------------------
css
-----------------------------
.br:before {
content: "\A";
white-space: pre-wrap;
}
-----------------------------
iphoneのブラウザで文字ができない現象に遭遇。通常文字列を長タップすると選択およびコピーのポップアップが出るが、それがでなくなる。
出なくなる条件。
以上3つの条件が揃うとコピーができない。文字列の長さを短くしたり、line-heightの値を小さくするとコピーができるようになる。viewportの指定を外せば、タグを含まない長い文字列でも、line-heightが大きい値でもコピーに支障なし。
現象はiphone5s(iOS9.3.2) と iphone6s(iOS9.3.3) で確認。それぞれの端末で選択できなくなるまでの文字数が違う。この違いが、画面の大きさからか、スペックからか、OSのバージョンからなのかは不明。
対症療法として文字列中の適当な箇所になどのタグを入れるとコピーできるようになる。
2016/09/22 追記
原因判明。読み込んでいた二つのcssファイルそれぞれに #content があった。一つ消したら不具合もなくなった。
contenteditable で編集可能にした値はテキストエリアやテキストフィールドにあるわけではないので form タグで囲っただけでは POST できない。
POST は javascript を用いれば可能。
--------------------------------------------------
<input type="button" value="送信" onclick="document.form1.my_value.value = document.all.textarea1.innerText;document.form1.submit();">
<form method="post" name="form1" action="">
<div id="textarea1" contenteditable>この文字列を送信する</div>
<input type="hidden" name="my_value" value="">
</form>
--------------------------------------------------
contenteditable で編集可能な値を隠しフォーム（hidden）に入れて、それを javascript で送信する。
POST したい値が複数ある場合は、値を「;」で区切ればいい。
--------------------------------------------------
<input type="button" value="送信" onclick="document.form1.my_value1.value = document.all.textarea1.innerText;document.form1.my_value2.value = document.all.textarea1.innerText;document.form1.submit();">
--------------------------------------------------
カテゴリー：html5, javascript
textareaで一部の文字だけ装飾する方法をネットで調べると Jquery を使った方法がいくつか見つかった。しかし自分のしたかったものとはちょっと違った。見つかった方法のソースをいじって自分のやりたかったことができればいいのだが、そこまで詳しくなので、理解するの時間がかかって面倒くさい。
で、タイトルとちょっと違うのだが、html や css で装飾した文字を textarea の文字のように簡単に編集できる方法を発見。やり方も超簡単だったので採用した。
サンプル
html
--------------------------------
<div id="box" contenteditable=true>この文字は直接編集できます。textarea は使っていません。</div>
--------------------------------
css
--------------------------------
#Box {
border: 1px solid #999;
width:300px;
height:100px;
}
.font1 {
color: red;
}
.font2 {
color: blue;
}
.font3 {
font-weight: bold;
}
--------------------------------
大事なのは「contenteditable=true」の部分のみ。これは html5 の属性。たったこれだけで box 内の装飾された文字を、あたかも textarea 内に書かれた文字のように編集できる。
