忍者ブログ

GAM-22のメモ

TEXTAREA の初期値をクリックで消す

2017.08 ← 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 →

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

TEXTAREA の初期値をクリックで消す

お知らせ

改良してみたので、こっちを使うことをお勧めします。

はじめに

このブログ、Another HTML-lint gatewayで、100点を目指し、なんとか達成したのですが、トップページだけで記事のページは最高でも99点です。

あと1点なのですが・・・

原因はコレです。

<INPUT type="text"> や <TEXTAREA> には、何か初期値となるようなテキストをあらかじめ書いておくことがWAIで薦められています。その理由に、空だと正しく処理できないWWWブラウザの可能性が示されています。

要するに、コメントなどのテキストボックスなどに、初期値のテキストを指定すれば良いとのことです。しかし、コメントはデフォルトで空なのがベストだと思います。

言葉では説明しにくいのですが、こんな感じにしてみました。

ちょっとは需要がありそうなネタだと思ったので、作ってみたJavaScriptを公開します。学校の7時限目に脳内で作ったのを、パソコンに書き写した拙速なものですが、簡潔なのでバグとかは無いんじゃないかと思います。

導入方法


  1. function setupTextareaDes() {
        // 種付け作業
        var textareas = document.getElementsByTagName("textarea");
        for (i = 0; i < textareas.length; i++) {
            if (textareas[i].className != "nodes") {
                textareas[i].onfocus = function (event) { return TextareaDes(this); };
            }
        }
        return;
    }
    function TextareaDes(from) {
        from.className = "nodes";
        from.value = "";
        from.onfocus = function (event) {};// これ以降呼び出されないように、自殺。
        return;
    }

    眠いので詳しい説明は省きますが、このプログラムを使える状態にしておきます。


  2. <body onload="setupTextareaDes();">

    <body>の中に、こんな感じに太字部分を書き足します。


  3. textarea {color: #999;}// 説明の装飾;
    textarea.nodes {color: #000;}// 通常の装飾;

    これを、CSSに書き足します。


  4. 準備完了です。↓のようなソースを書くと、

    <form action="dummy">
    <textarea rows="1" cols="1">この部分が説明となります。</textarea>
    </form>

    ↓のようになります。

詳しい仕様

このプログラムを適応しないようにするのも簡単です。

<form action="dummy">
<textarea class="nodes" rows="1" cols="1">本来のように、初期のテキストとして使えるようになります。</textarea>
</form>
PR
この記事にコメントする
お名前
タイトル
文字色
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字
気軽にコメントしてください
名無しさん / 2008/11/20(Thu) / 編集
気軽にコメントしてください
ああさん / 2008/11/20(Thu) / 編集
この記事にトラックバックする
トラックバックURL:
カテゴリー
カウンター
最新記事
最新コメント
Twitter
人気記事
Amazon お買い得情報
Amazon お買い得情報
プロフィール
自画像
HN :
GAM-22
性別:
男性
職業:
大学1年生
HSP暦:
6年
好きなもの :
ゲーム, アニメ, マヨネーズ
嫌いなもの :
運動, 注射, ホラー映画, 英語
好きなバンド :
Muse, Radiohead
その他 :
文章能力が欠如している
バナー
Copyright © GAM-22のメモ All Rights Reserved
Powered by ニンジャブログ Designed by ピンキー・ローン・ピッグ 忍者ブログ / [PR]