0

基本的に質問の2つの部分。

  1. Facebookのホームページのように、スタイル（つまり、提案することを意味するようにグレー表示）を使用して、フォームのテキストボックス内に説明テキストを配置する方法（フォームのテキストボックスのテキスト領域に電子メールを書くなど）。
  2. ページがロードされるとすぐに特定のフォームフィールドにカーソルフォーカスを置く方法 (Google サインインや Facebook サインインなど)

上記の手順のいずれかに含まれる JavaScript はありますか? はいの場合、指定してください

  1. JavaScript 以外の回避策および/または
  2. 必要なことを行う JavaScript コード
4

6 に答える 6

5

最初のトリックは単なるプリセット値です。フィールドをクリックすると、チェックする onclick 関数があります。「ここにメールを書いてください」という値です。その場合は、フィールドをクリアします。そうでない場合は何もしません。

次に、フィールドが空かどうかをチェックする onblur 関数があります。その場合は、「ここにメールを書いてください」と印刷してください。

2 つ目も JavaScript です。

これらの両方の機能を備えたサンプルページを次に示します

<html>
<script type="text/javascript">
    function searchBox()
    {
        elem = document.getElementById("search");

        if(elem.value == "Search...")
        {
            elem.value = "";
        }
    }

    function searchBoxBlur()
    {
        elem = document.getElementById("search");

        if(elem.value == "")
        {
            elem.value = "Search...";
        }
    }

    function init()
    {
        document.getElementById("other_box").focus();
        }
        window.onload = init;
    </script>
<body>
    <input type="text" name="other_box" id="other_box" />
    <input type="text" name="search" id="search" value="Search..." onclick="searchBox()" onblur="searchBoxBlur()" />
</body>
</html>
于 2009-06-23T14:41:37.563 に答える
1

最初の、迅速で汚い：

<input name="foo" value="Default text OMG!" onfocus="if(this.value == 'Default text OMG!') this.value = ''"/>

そのonfocusイベントを外部 JavaScript ファイルの関数にすることをお勧めします。それは次のようになります：

外部スクリプト:

function checkText(el,someText){ if(el.value == someText) el.value = ''}

あなたの入力:

<input name="foo" value="Default text OMG!" onfocus="checkText(this,'Default text OMG!')"/>

2 番目: 「フォーカス」したい入力に ID を指定し、次のようにします。

<input id="foo" name="foo" value="Default text OMG!"/>

そしてスクリプトで：

window.onload = function(){ document.getElementById('foo').focus() }
于 2009-06-23T14:49:20.077 に答える
1

質問の最初の部分を実行する JavaScript 以外の方法はありません。2 番目の部分に関する限り、これは JavaScript で簡単に実行できますが、JavaScript がなくても、最新のブラウザーのほとんどは最初の入力フィールドにフォーカスを追加します。

JavaScript コード

  1. 入力フィールドの値をプリセット値に設定するだけです。

    function focus_function()
{
if (this.value=="Enter email here") {
this.value="";
this.class="actualEmail";
}
}

function blur_function()
{
if (this.value=="") {
this.value="Enter email here";
this.class="preset";
}
}

    presetとの 2 つの CSS クラスを持つことができactualEmail、異なる色などを指定できます。

  2. 必要な入力フィールドにフォーカスを置く onload 関数を用意するだけです:

    window.onload = function() 
{
document.getElementById("email_field").focus();
}
于 2009-06-23T14:50:09.153 に答える
1

これには JavaScript が必要です (jQuery フレームワーク経由)。以下はすぐに入力され、テストされていません。ちょっとした工夫が必要かもしれません。ご不明な点がございましたら、お問い合わせください:)

  1. 目的の要素にオートフォーカス
  2. 焦点が合っていないときに要素のテキストの色を変更する
  3. ユーザー提供のテキストが存在しない場合、デフォルトのテキストを表示する
/* Run our work once the document is ready (loaded */
$(document).ready(function(){

  /* Set initial state of field */
  $("input.first-name").val("First Name").css("color", "#CCCCCC");

  /* Attach logic to the .focus() event of our input field */
  $("input.first-name").focus(function(){

    /* What to do when this field is focused */
    $(this).val("").css("color", "#333333");

  }).blur(function(){

    /* What to do when the field is blurred */
    if ($(this).val() == "") {

      /* Set value to 'First Name,' and set color to light gray */
      $(this).val("First Name").css("color", "#CCCCCC");

    }

  });

  /* Autofocus our field */
  $("input.first-name").focus();

});
于 2009-06-23T14:47:46.227 に答える
0 
myField.focus();

これにより、ページの読み込み時にカーソルが myField に配置されます (最後または$(document).ready()jQuery ブロックに配置した場合)。異なるブラウザーでこれに一貫性のない動作が見られるため、マイレージは異なる場合があります。

テキスト フィールドの入力の色を設定する限り、デフォルト値を持つように設定し、ユーザーがクリックしたときに別の CSS クラスを追加します。

CSS は次のようになります。

.grayedInputField {
    color: gray;
}
.activeInputField {
    color: black;
}

ユーザーがフィールドをクリックすると、javascript でフィールドにクラスを追加して、次のようにテキストの色を変更します (ここでも jQuery):

 $(".grayedInputField").focus(function(){$(this).addClass("activeInputField")});
于 2009-06-23T14:47:57.690 に答える
0

あなたが考えるかもしれない非標準の属性があります：（placeholderサファリで動作すると思います）およびautofocus（HTML5仕様の一部）。

于 2009-06-23T14:47:54.167 に答える