5

フィールドに入力する内容を説明するデフォルト値を持つフォームがあります (ラベルを置き換えます)。ユーザーがフィールドにフォーカスすると、次の関数が呼び出されます。

function clear_input(element)
{
    element.value = "";
    element.onfocus = null;
}

onfocus は null に設定されているため、ユーザーがフィールドに何かを入力してそれを変更することを決定した場合、入力は消去されません (したがって、一度だけ消去されます)。ここで、ユーザーがデータを入力せずに次のフィールドに移動すると、この関数 (onblur と呼ばれます) を使用してデフォルト値が復元されます。

function restore_default(element)
{
    if(element.value == '')
    {
        element.value = element.name.substring(0, 1).toUpperCase()
                          + element.name.substring(1, element.name.length);
    }
}

たまたまデフォルト値が要素の名前だったので、ID を追加する代わりに name プロパティを操作しました。問題は、要素をスキップすると、onfocus イベントが clear_input で無効化されますが、復元されないことです。

追加した

element.onfocus = "javascript:clear_input(this);";

restore_default 関数では機能しません。どうすればいいですか？

4

4 に答える 4

7

使用する

element.onfocus = clear_input;

または（パラメータ付き）

element.onfocus = function () { 
    clear_input( param, param2 ); 
};

と

function clear_input () {
    this.value = "";
    this.onfocus = null;
}

「javascript:」ビットは不要です。

于 2008-11-15T18:21:36.027 に答える
1

フィールドを空にすることを許可していないように見えますが、ユーザーがフィールドに 1 つ以上のスペースを入力するとどうなりますか? これを防ぎたい場合は、トリミングする必要があります。(トリミングのさまざまな方法については、 Steven Levithans のブログを参照してください)。

function trim(str) {
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

本当に文字列を大文字にしたい場合は、次を使用できます。

function capitalize(str) {
    return str.substr(0, 1).toUpperCase() + str.substr(1).toLowerCase();
}

onfocus イベントをクリアすることで、あってはならない問題が発生しました。より簡単な解決策は、if ステートメントを onfocus イベントに追加することです。これにより、それがデフォルト値である場合にのみクリアされます (ただし、tvanfosson が提案したように選択することをお勧めします)。

javascriptが無効になっている場合でも、ページが表示されたときにinput-elementsに値が表示されるように、input-elementsでvalue-propertyを設定していると思います。その値は、element.defaultValue として使用できます。このアプローチを使用することによるボーナス:

  • デフォルト値は 1 か所で定義するだけです。
  • ハンドラーで値を大文字にする必要はなくなりました。
  • デフォルト値は大文字と小文字を区別できません (「John Y McMain」など)。
  • デフォルト値は、要素の名前と同じである必要はなくなりました。

.

function clear_default(element) {
    if (trim(element.value) == element.defaultValue ) { element.value = ""; }
}

function restore_default(element) {
    if (!trim(element.value).length) { element.value = element.defaultValue;}
}
于 2008-11-15T19:52:37.887 に答える
0 
<!-- JavaScript
function checkClear(A,B){if(arguments[2]){A=arguments[1];B=arguments[2]} if(A.value==B){A.value=""} else if(A.value==""){A.value="Search"}}
//-->

<form method="post" action="search.php">
<input type="submit" name="1">
<input type="text" name="srh" Value="Search" onfocus="checkClear(this,'Search')" onblur="checkClear(this,' ')">
</form>
于 2009-11-19T14:30:08.017 に答える
0

少し違った方法で処理することをお勧めします。値をクリアする代わりに、すべてを強調表示して、ユーザーが入力を開始して上書きできるようにします。その後、デフォルト値を復元する必要はありません (ただし、値が空の場合も同様に復元できます)。テキストはクリアされず、強調表示されるだけなので、ハンドラーをそのままにしておくこともできます。検証を使用して、値が入力の元の値でないことを確認します。

function hightlight_input(element) {
    element.select();
}

function restore_default(element) // optional, do we restore if the user deletes?
{
    if(element.value == '')
    {
        element.value = element.name.substring(0, 1).toUpperCase()
                          + element.name.substring(1, element.name.length);
    }
}
于 2008-11-15T18:33:52.337 に答える