web-dev-qa-db-ja.com

フィールドに入力したときにフォームの値が消えるようにするにはどうすればよいですか？

約8つの入力フィールドを持つ単純なフォームを作成しています。フィールドの初期値は、人々が何を入力することになっているのかを示してほしい。たとえば、value = "name"を使用すると、そこに名前を入力できるようになります。

私の質問は、初期値がそのフィールドに入力されたときにどのように消えて、初期値がヒントにすぎず、名前を入力する前に消去する必要がある永続的な値ではないかということです。

ありがとう！

htmlformswebforms
9
forrest

'default'値を "Name"に設定します。次に、javascriptと「onfocus」イベントを使用して、フィールドをクリアします。

だからあなたは持っているでしょう：

<input type="textbox" value="Name" onfocus="if (this.value=='Name') this.value='';"/>
22
Erich

はるかに簡単な方法はおそらく次のとおりです。

placeholder="Name"
39
Matt

これはあなたがそれをすべき方法です。

<input type="text" value="name" onfocus="this.value = this.value=='name'?'':this.value;" onblur="this.value = this.value==''?'name':this.value;">

クリックしてオフにすると、デフォルト値に戻ります。彼らがそれをクリックして何かを入力した場合、彼らが再びそれをクリックした場合、彼らが置いたものを消去しようとはしません。

6
Mickey

基本的なJavaScript：

<input type="text" value="name" onfocus='if(this.value=="name"){this.value="";}' />
3
Daniel Sorichetti

S＆Gのためだけに、この問題に対して再利用可能なjQueryソリューションを投稿すると思いました。

var formDefaulter=function(){
    //Class to hold each form element
    var FormElement=function(element){
        var that=this;
        this.element=element;

        var initialVal=this.element.val();
        var isEdited=false;

        this.element.focus(function(){clearBox()});
        this.element.blur(function(){fillBox()});

        var clearBox=function(){
            if(!isEdited){
                that.element.val("");
                isEdited=true;
            }
        }
        var fillBox=function(){
            if(that.element.val()==""){
                that.element.val(initialVal);
                isEdited=false;
            }
        }
    }

    var add=function(elementId){
        new FormElement($('#'+elementId));
    }

    return{
        add:add
    }
}();

次に、ID属性値を使用して各要素をアタッチする必要があります。そのようです：

$(function(){
    formDefaulter.add('contact_name');
    formDefaulter.add('contact_email');
    formDefaulter.add('contact_msg');
});

これにより、コンテンツが削除された場合にも、フォーム要素に元の値が再入力されます。とにかく、うまくいけば、これは誰かに役立つでしょう。

1
twiz