テキストエリアに元から書いてある文字をクリックで消すには？

[新着] Webテンプレートを仮オープンしました

0   名前： 青木 ： 2007/04/15（日） 19:31  ID:l5m0IDJP sub-bK
間違えてＨＴＭＬのほうに質問してしまったのでこちらにコピーで質問しなおしですすいません；


テキストエリアにもともと文字を表示させてあるのですが、
そこにお客さんがコメントを書こうとしてクリックした時にその文字を消す　というのはどうやるんですか？

http://imagenavi.jp/photosearch/
↑ここのページの右端にある「キーワードや画像ＩＤを入力」のところみたいな感じにしたいです

今はこうなってます↓↓↓
<form action= method=xxx>
<input type=hidden name=_mail value=xxx>
<input type=hidden name=_mail_key value=xxx>
<input type=hidden name=_location value=xxx>
<input type=hidden name=_subject value=xxx>
<input type=hidden name=_type value=xxx>

<TEXTAREA ROWS=1 COLS=30 name="本文" style="color: #000000; background-color: ffffff; border:solid; border-width:1px">もともとある文章</TEXTAREA>
<input type=submit value="送る" style="color: 000000 ; background-color: #dddddd; border:solid; border-width:1px">
</form>
1   名前： 匿名 ： 2007/04/15（日） 19:31  ID:Nsu0bO32 sub-Ds
＞お客さんがコメントを書こうとしてクリックした時に

何をクリックしたの？
2   名前： 匿名 ： 2007/04/15（日） 19:31  ID:5eaaCfHC sub-gm
>>1余計なコメントじゃないですかそれ？
何をクリックしたの？ってｗ文見れば理解できるでしょ、理解力なさすぎ
3   名前： 匿名 ： 2007/04/15（日） 19:31  ID:Nsu0bO32 sub-Ds
>>2

ほう、すごい読解力ですね。
では、教えてください、でないとスクリプトが書けないので。
何をクリックしたの？
4   名前： 匿名 ： 2007/04/15（日） 19:31  ID:5eaaCfHC sub-gm
http://imagenavi.jp/photosearch/
↑ここのページの右端にある「キーワードや画像ＩＤを入力」のところみたいな感じにしたいです
5   名前： Chip ： 2007/04/15（日） 19:31  ID:iXTrKUp6 sub-FV
こんな感じじゃろうか？
<TEXTAREA 〜
 onfocus="if(this.value == this.defaultValue) this.value=''"
 onblur="if(this.value == '') this.value=this.defaultValue"
>もともとある文章</TEXTAREA>
6   名前： 匿名ID:Nsu0bO32 ： 2007/04/15（日） 19:31  ID:xLrEX2BX sub-Ds
なるほど。
意図を変えてもうしわけないけれども、このテの細工は不案内な
訪問者を戸惑わせることがある。
何か入力しようと思うところに、すでに文字が入っている。
onfocusしてみてはじめて、それが消えるので、その仕掛けが分かる。

なので、ユーザビリティを考えると、>>5のコードをそのまま使わせ
ていただけば、こう書いた方がいいような気がする。

<textarea onmouseover="if(this.value == this.defaultValue) this.value=''"
onmouseout="if(this.value == '') this.value=this.defaultValue">
もともとある文章
</textarea>
7   名前： Chip ： 2007/04/15（日） 19:31  ID:iXTrKUp6 sub-FV
>6
実用的な仕掛けなんで、入力しようって意思が示された時だけ機能したほうが理にかなっていると思います。
入力する意思のない利用者に機能をわからせる必要もないし、
マウスが通過しただけで反応するってのも違う気がしますね。
まぁ〜どっちでもいい気もするんですが一応。
（通過だけっていったらonfocusだってtabで移動している最中の可能性もあるし。）


本題。textareaのdefaultValueは実装が違うブラウザがある(*1)ようなので
ちょっとカッコ悪いけど次のように訂正します。
<TEXTAREA 〜
 onfocus="if(this.value == 'もともとある文章') this.value=''"
 onblur="if(this.value == '') this.value='もともとある文章'"
>もともとある文章</TEXTAREA>

*1 Operaが違う。ちょっと調べたけどよくわからなかった。
8   名前： 匿名 ： 2007/04/15（日） 19:31  ID:q86ngjJh sub-Cz
ユーザビリティってことなら、入力値を消すということには慎重にならないといけないよ。編集の意図がないのに、フォーカスを当てたりポインタ通過させるだけで以前の内容が消去されるのでは、たまったものではない。
<textarea cols="80" rows="25"
  onfocus="this.select (); "
  onblur="if (this.value == '') this.value = this.defaultValue; "
>Original Text.</textarea>

で、選択状態にするのが無難だと思う。なお、Safari2 ではクリックと同時に選択が解かれるが、どうせ Command-A で再選択できるから無問題。

>>7
Opera9 では defaultValue に特に問題はなかったけど。
9   名前： Chip ： 2007/04/15（日） 19:31  ID:iXTrKUp6 sub-FV
>9
以前の内容は消したりしてませんよ。
あくまでdefaultValueの場合だけっす。

選択状態にすると、普段はそういう挙動はしないんで
それこそ修正するつもりが全部消しちゃう（上書きしちゃう）なんてケースも心配しちゃいますね。(まぁ選択状態になったのを確認しない利用者の操作ミスではあるけれど)
<textarea 〜
 onfocus="if(this.value == this.defaultValue) this.select()"
 onblur="if(this.value == '') this.value=this.defaultValue"
>もともとある文章</textarea>
こんな風に値が利用者の入力値じゃないときだけ、とかならありかもしんない。


で、Operaですけど最新(9.2)にしたOKでしたね。
ちと古いバージョンに対してどうするかは質問者さんにおまかせします。
古いバージョンでも機能しないだけでエラーになったりはしてませんでした。
10   名前： 匿名 ： 2007/04/15（日） 19:31  ID:q86ngjJh sub-Cz
> あくまでdefaultValueの場合だけっす。

ごめん、見落として脊髄反射してた。

> 修正するつもりが全部消しちゃう

その場合、大抵のブラウザでは Ctrl-Z でやり直しできる。要するに、1 回でもユーザのアクションを通せば、ブラウザ側の機能で undo できるというわけ。

慎重に慎重を重ねるなら、textarea 要素は readonly にしておいて、編集ボタンを押したときのみ編集可、中途キャンセルした場合は編集内容だけが破棄され、以前の状態に戻る、なんてのもアリかもしれない（その意味で、俺は >>1 の指摘は面白いと思ったんだが）。まあ、Web 上であまりにも独特な User Interface というのは避けるべきなんだけどね。
11   名前： 青木 ： 2007/04/15（日） 19:31  ID:l5m0IDJP sub-bK
わあみなさんいろいろ御丁寧にありがとうございました！！
なるほどな事がいっぱいで本当に参考になりました！
さっそくタグ打ちなおしましたところ上手く作動しましたｖ　ありがとうございましたっ！
一覧へ戻る