9

デフォルト値のテキストが割り当てられた入力ボックスがあります。ユーザーがフィールドにフォーカスしているときにこのテキストを削除するにはどうすればよいですか::

コード

<input type="text" name="kp1_description" value="Enter Keypress Description">
4

9 に答える 9

18 
$(document).ready(function(){
    var Input = $('input[name=kp1_description]');
    var default_value = Input.val();

    Input.focus(function() {
        if(Input.val() == default_value) Input.val("");
    }).blur(function(){
        if(Input.val().length == 0) Input.val(default_value);
    });
})​

それはそれをする必要があります。

更新されました。フォーカスアウトイベントの2番目のパラメーターがないため、フォーカスに2番目のパラメーターがないことを忘れました。これは、ぼかしでチェーンする必要があります。

http://jsfiddle.net/hDCsZ/

また、次のような独自の関数を作成することも検討する必要があります。

$.fn.ToggleInputValue = function(){
    return $(this).each(function(){
        var Input = $(this);
        var default_value = Input.val();

        Input.focus(function() {
           if(Input.val() == default_value) Input.val("");
        }).blur(function(){
            if(Input.val().length == 0) Input.val(default_value);
        });
    });
}

その後、そのように使用します

$(document).ready(function(){
    $('input').ToggleInputValue();
})​
于 2010-09-27T17:33:40.220 に答える
8

このようにしないでください。jQuery透かしスクリプトを使用します： http ：//code.google.com/p/jquery-watermark/

$("input[name='kp1_description']").watermark("Enter Keypress Description");

手動で行う場合は、説明しなければならないことがたくさんあります。たとえば、テキストボックスのフォーカスが失われるとどうなりますか？価値がない場合は、ヘルパーテキストを読みたいと思うでしょう。ある場合は、それらの変更を尊重する必要があります。

他の人に重い物を持ち上げさせるのは簡単です:)

于 2010-09-27T17:27:42.550 に答える
6

HTML5を使用すると、Javascriptなしでそれを行うことができます。placeholderの代わりに使用するだけですvalue。これは素晴らしい追加だと思いますが、もちろん、最初にブラウザの互換性を確認する必要があります。

于 2012-07-28T04:06:09.047 に答える
4 
<input type="text" id="anything" placeholder="enter keypress description">

私はこれが役立つと思います

于 2014-11-20T13:58:22.530 に答える
3 
$('input, textarea').each(function () {
    var Input = $(this);
    var default_value = Input.val();

    Input.focus(function() {
        if(Input.val() == default_value) Input.val("");
    }).blur(function(){
        if(Input.val().length == 0) Input.val(default_value);
    });
});
于 2014-04-13T19:03:28.793 に答える
1

var defaultForInput = "abc";

<input id="myTextInput" type="text" placeholder=defaultForInput />

フォームを送信するときは、input（id = "myTextInput"）の値が'empty-string'であるかどうかを確認し、そうである場合は（defaultForInput）に置き換えてください。

于 2013-07-08T19:24:14.303 に答える
1

スーパーデュパーショートバージョン

$('#input_id').focus(function() {
    $(this).val("");
});
于 2014-09-08T22:14:47.523 に答える
0

HTML：

<form method="post">
  <input type="text" id="customer" value="Username"/>      
  <input type="Submit" value="Login" class="rc" />
</form>

Javascriptコード：

<script>
$('#customer').on({
    focus:function(){                   
      if(this.value == 'Username') this.value = '';
    },
    blur:function(){
      if(this.value == '') this.value = 'Username';
    }
})
</script>

それがすべてです、私はそれが役立つことを願っています。

于 2012-11-24T09:15:34.260 に答える
0

プレーンJavaScript：

(function () {
  let input = document.querySelector ("input[name='kp1_description']");
  input.onfocus = function () {
    this.placeholder = this.value;
    this.value = '';
  };
})();

これにより、値が完全に削除されるのではなく、プレースホルダーに保持されます。これが気に入らない場合は、プレースホルダー行を削除してください。

于 2017-12-08T15:03:31.810 に答える