忍者ブログ

GAM-22のメモ

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

2017.03 ← 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 や INPUT の初期値をクリックで消す

はじめに

TEXTAREA要素やINPUT要素の初期値を、クリックで自動に消すようにするプログラムを作ってみました。

TEXTAREA要素の初期値を指定しないと、HTMLの文法上にも問題があるので、使う意味はそこそこある気がします。

仕様

基本 TEXTAREA
<textarea>初期値です。</textarea>
基本 INPUT
<input type="text" value="初期値です。" />

type属性をtextにするか、type属性を省略します。

無効にする
<textarea class="nodes">初期値です。</textarea>
<input type="text" class="nodes" value="初期値です。" />

class属性にnodesを付けると無効にできます。

補足
<input type="text" class="right" value="初期値です。" />
<textarea class="bold nodes">初期値です。</textarea>

スペースで区切り、他のクラスなどとも併用もできます。

工夫点

リロード時に、編集内容が初期値に置き換わるのを防止しました。

導入方法

  1. // TEXTAREA や INPUT の初期値をクリックで消す
    // http://gmr.blog.shinobi.jp/Entry/527/
    
    // 名称が思い浮かばない、ClearDefaultValue とか長すぎる。
    // なぜか「説明」という意味の、Description を略して、Des になった。
    
    function setupDes() {
        // 種付け作業
        var textarea = document.getElementsByTagName("textarea");
        for (i = 0; i < textarea.length; i++) {
            if (textarea[i].className.search("nodes") < 0) {
                if (textarea[i].value == textarea[i].defaultValue) {textarea[i].className += " ondes"; }
                textarea[i].onfocus = function() {offDes(this); }
                textarea[i].onblur = function() {onDes(this); }
            }
        }
        var input = document.getElementsByTagName("input");
        for (i = 0; i < input.length; i++) {
            if ((input[i].className.search("nodes") < 0) && ((input[i].getAttribute("type") == "text")||(input[i].getAttribute("type") == null))) {
                if (input[i].value == input[i].defaultValue) {input[i].className += " ondes"; }
                input[i].onfocus = function() {offDes(this); }
                input[i].onblur = function() {onDes(this); }
            }
        }
        return;
    }
    
    function offDes(from) {
        if (from.className.search("ondes") < 0) {return 0;}
        from.className = from.className.replace(/ondes/, "");
        from.value = "";
        return 1;
    }
    function onDes(from) {
        if (from.value != "") {return 0;}
        from.className += " ondes";
        from.value = from.defaultValue;
        return 1;
    }

    これがプログラム本体です。これと同じ、des.jsを保存してから、アップロードします。

  2. <head>
    <script src="http://なんとかブログ/des.js"></script>
    </head>

    1. のdes.jsをhead要素の中で読み込みます。

  3. <body onload="setupDes();">

    body要素の中に、これを書き加えます。

  4. .ondes {color: #999;}

    これをCSSの適当な位置に挿入します。

  5. 完了です。

過去のもの

最初は、超シンプルプログラムでした。一応残しときます。

PR
この記事にコメントする
お名前
タイトル
文字色
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字
気軽にコメントしてください
名無しさん / 2008/07/01(Tue) / 編集
↑のように
灰色の無効状態で送信しても送信が成功してしまいます。これは、無効状態というのは単純に文字の色をCSSで書き換えているだけで、黒で文字が入力されているのと同じ状態だからです。
名無しさん、ありがとうございました。
 (2008/07/02)
textareaが空白だと怒られるので検索してみたところたどり着きました。

js利用させてもらっています。
すばらしいjsに感謝です。
コナさんのページコナさん / 2008/09/08(Mon) / 編集
どういたしまして
コメントありがとうございます。大変励みになりました。
作ろうと思った動機が、Another HTML-lint gatewayで100点を取りたい、というものだったので、同じことを考える人も世の中にいるんだなぁ、と思ってしまいました。
 (2008/09/11)
気軽にコメントしてください
testさん / 2008/10/16(Thu) / 編集
「気軽にコメントしてください」はやっぱりわたしちゃうんですね。
testさん / 2008/10/16(Thu) / 編集
そうなんです(汗)
内部的には、単純に文字の色を変えてるだけなので、送信してしまいます。
ただ、送信ボタンにJavaScriptを仕掛けておけば、防止できる気がします。
中間テスト(高校生なんです)が終わった後、試してみたいと思います。
 (2008/10/17)
の送信を防止するようにしました。
もし、灰色の時に送信した場合「コメントを入力してください。」とアラートが現れるハズです。

コメントフォームの構造がブログによって異なるので、どのページでも防止できるようにはできませんでした。

防止する方法を知りたい方は、ブログのURLを控えてコメントしてください。
GAM-22(管理人)さんのページGAM-22(管理人)さん / 2008/11/20(Thu) / 編集
このJSを利用させていただいている者です。
お世話になります。

ブログではないのですが、
下記のページの場合、
入力無しで送信できてしまいます。

解決方法があれば、
教えていただけませんか?
よろしくお願いいたします。


http://biyoubase.com/form/
http://biyoubase.com/link/
美容ベースさんのページ美容ベースさん / 2009/02/10(Tue) / 編集
Re:灰色送信防止
ちょっとPCが逝っちゃったので、返信が遅れました。ご利用ありがとうございます。
美容ベースさんのページですが、灰色の部分が複数あります。従来の防止方法だと、灰色の部分は1つまでの対応でしたが、今度は複数あっても防止できるようなのを作ってみました。

http://biyoubase.com/form/
ですが、送信フォームで[メール送信]をクリックした時、sendmail(this);という関数を呼び出すようになってますよね?
このsendmailの中にjsを書き足します。
書き足す場所ですが、
http://biyoubase.com/form/mailform/mailform.js

----------------------
function sendmail(obj){
[ここ!!]
var caution = "";
var errorflag = 0;
var must = mustId;
(以下略)
----------------------

書き足すのは以下のjsです。
----------------------
var textarea = obj.getElementsByTagName('textarea');
for (i = 0; i < textarea.length; i++) {
if (textarea[i].className.search('ondes') >= 0) {
alert("未入力項目があります。");
return false;
}
}
var input = obj.getElementsByTagName('input');
for (i = 0; i < input.length; i++) {
if (input[i].className.search('ondes') >= 0) {
alert("未入力項目があります。");
return false;
}
}
----------------------

分からないことがあったら、遠慮せずにコメントしてくださいね。すぐには返信できないと思いますが…
 (2009/02/11)
大変な時に、時間を取ってくださって、
本当にありがとうございます。

教えていただいたとおりにjsを追加すると、
・・・サクッとできちゃいました。
素晴らしいjsと、素晴らしい対応に、ただただ脱帽です!


分からないことがあったら・・・
数え切れないほど、あります!!
また後日、落ち着いたころに、
知恵を借りに来るかもしれません。
その際には、よろしくお願いします。

ではでは、
PC無償修理できたらいいですね。
美容ベースさんのページ美容ベースさん / 2009/02/13(Fri) / 編集
どういたしまして
上手く解決したようで何よりです。
PCの件ですが、どうやらシステムボードの無償交換の対象だったようで、14日にはメーカーがPCを回収しに来てくれました。一安心です。
何かあれば、遠慮なくコメントください。
 (2009/02/16)
はじめまして。
スクリプト、利用させていただいています。
ありがとうございました。

先ほどこの記事にトラックバックさせてもらったのですが、トラックバックURLを取得する際にトラブルが生じました。
xp+ie6で、トラックバックURLが表示されてるテキストフィールドにマウスを置くと、ブラウザがフリーズしてしまいます。
operaとfirefoxでは問題なくコピーできました。

実は、このコメントを書き込む際にも、はじめはxp+ie6で書き込もうとしたのですが、名前欄の入力で同様にフリーズしてしまいました。
現在operaで入力しています。

この記事で配布されてスクリプトを、私のサイトでも利用させていただいていますが、そのようなトラブルは生じていません。
ですので、別の何かが原因だと思われます。
テトラポッドさんのページテトラポッドさん / 2009/09/20(Sun) / 編集
ありがとうございます
えと、拙いスクリプトを利用していただいたばかりか、詳しい状況まで知らせてくださり、ありがとうございます。

私の方はVistaなので、IE6のインストールできず、あまり確認などしていなかったので、全く気が付きませんでした。

Virtual PCにXPをインストールして確かめてみたところ、ご報告のようにブラウザが落ちました。たしかに、テトラポッドさんのブログでは問題ないですね。おっしゃる通り、私のブログのテンプレや他のスクリプトが影響しているのだと思います。

はっきりと原因が分からないので、対処できないかもしれませんが、できる範囲で頑張ってみます。本当にご報告ありがとうございます。

とはいえ、このブログも、自作したスクリプトや他の人のスクリプトが混在したりして、自分でも何がしたかったのか、混乱する始末です。

もう一度、JavaScriptを勉強し直し、HTMLとCSSを熟知した上で、自分の手で0からテンプレから作り直したい、と思う今日この頃。
 (2009/09/20)
はじめまして。
このページのdes.jpスクリプトを商用サイトに利用することは可能でしょうか?
もし、条件などがあるようでしたらお教えください。
よろしくお願いいたします。
はるさん / 2012/08/30(Thu) / 編集
Re:利用について
>はじめまして。
>このページのdes.jpスクリプトを商用サイトに利用することは可能でしょうか?
>もし、条件などがあるようでしたらお教えください。
>よろしくお願いいたします。

連絡ありがとうございます。
こちらの方でコメントを返させていただきました。
http://gam0022.net/about-me/index.html#comment-634040655
 (2012/08/30)
日本代表 サッカー ユニフォーム 日本国(にっぽんこく、にほんこく)、または日本(にっぽん、にほん)は、日本列島及び周辺の島々を領土とする国家である。スポーツショップは日本のサッカーユニフォームを激安販売しております。日本代表 ユニフォーム.http://www.yunifomu.com/soccer/national-sports-team/japan.html
Japan Beats By Dre. モンスター ヘッドホン 2012 新作、大人気、格安価格通販、HOT SALE! レビューNO.1【送料無料】最安値.高音質極品!
http://www.japanbeatsbydre.com/
beats by dr dreさんのページbeats by dr dreさん / 2012/09/05(Wed) / 編集
JMBはモンスター ヘッドホンの通販専門店で、人気のモンスタービーツ,monster beats,モンスターケーブル,を安い価格でご提供しております!最高の品質のモンスターが全品送料無料!
http://www.japanbeatsbydre.com/
beats by dr dreさんのページbeats by dr dreさん / 2012/09/05(Wed) / 編集
JMBはモンスター ヘッドホンの通販専門店で、人気のモンスタービーツ,monster beats,モンスターケーブル,を安い価格でご提供しております!最高の品質のモンスターが全品送料無料!
http://www.japanmonsterbeats.com
monster beatsさんのページmonster beatsさん / 2012/09/05(Wed) / 編集
この記事にトラックバックする
トラックバックURL:
検索窓の初期値を自動削除
当ブログ上部の検索窓の機能が、ブログ内検索だとはっきりわかるようにしたかったので、スペースやデザイン等も考慮した結果、初期値を「ブログ内検索」としました。 ただ、そうしますと、検索語句を入力の際、わざわざ初期値を削除しなければなりません。 「TEXTAREA や INP..
URL / 2009/09/20(Sun)
カテゴリー
カウンター
最新記事
最新コメント
Twitter
人気記事
Amazon お買い得情報
Amazon お買い得情報
プロフィール
自画像
HN :
GAM-22
性別:
男性
職業:
大学1年生
HSP暦:
6年
好きなもの :
ゲーム, アニメ, マヨネーズ
嫌いなもの :
運動, 注射, ホラー映画, 英語
好きなバンド :
Muse, Radiohead
その他 :
文章能力が欠如している
バナー
Copyright © GAM-22のメモ All Rights Reserved
Powered by ニンジャブログ Designed by ピンキー・ローン・ピッグ 忍者ブログ / [PR]