ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptを使用してフォーム入力プロンプト機能を実装するにはどうすればよいですか?

JavaScriptを使用してフォーム入力プロンプト機能を実装するにはどうすればよいですか?

WBOY
WBOYオリジナル
2023-10-18 10:27:231296ブラウズ

如何使用 JavaScript 实现表单输入提示功能?

JavaScript を使用してフォーム入力プロンプト機能を実装するにはどうすればよいですか?

フォーム入力プロンプトは、一般的な Web ページの対話型機能であり、ユーザー エクスペリエンスを向上させるために、ユーザーが入力するときに対応する提案やプロンプトを表示できます。 JavaScript は、フォーム入力プロンプト機能を簡単に実装できる強力なスクリプト言語です。この記事では、JavaScript を使用してこの機能を実装する方法と具体的なコード例を紹介します。

1. 準備
コードを書き始める前に、テキスト入力ボックスとプロンプト ボックスを含む HTML ページを作成する必要があります。サンプル コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <title>表单输入提示示例</title>
</head>
<body>
  <h1>表单输入提示示例</h1>
  
  <input type="text" id="input" onkeyup="showSuggestions()">
  
  <div id="suggestions"></div>
  
  <script src="script.js"></script>
</body>
</html>

上記のコードでは、テキスト入力ボックスと空のプロンプト ボックスを含む、「フォーム入力プロンプトの例」というタイトルの Web ページを作成します。また、script.js ファイルで定義されている、入力ボックスの onkeyup イベントで showSuggestions() という名前の JavaScript 関数を呼び出します。

2. JavaScript コードを記述する

  1. 入力ボックスの値を取得する
    まず、showSuggestions() で入力ボックスの値を取得する必要があります。 ### 関数。 getElementById メソッドを使用してテキスト入力ボックスの要素を取得し、value 属性を使用してその値を取得できます。サンプル コードは次のとおりです。
  2. function showSuggestions() {
      var input = document.getElementById("input");
      var inputValue = input.value;
      
      // TODO: 在这里编写后续的代码
    }
    プロンプト ボックスの内容を設定する
  1. 次に、入力ボックスの値を決定し、適切なプロンプト情報をプロンプトボックス。ここでは、プロンプト ボックスの ID が
    suggestions であると仮定します。サンプル コードは次のとおりです。
  2. function showSuggestions() {
      var input = document.getElementById("input");
      var inputValue = input.value;
      
      var suggestions = document.getElementById("suggestions");
      
      if (inputValue.length === 0) {
        suggestions.innerHTML = "";
      } else {
        suggestions.innerHTML = "<p>输入:" + inputValue + "</p>";
      }
    }
上記のコードでは、

if ステートメントを使用して入力ボックスの値を決定します。値が空の場合は、プロンプト ボックスの内容を空の文字列に設定します。それ以外の場合は、プロンプト ボックスの内容を入力値を含む段落タグに設定します。

    プロンプト ボックスの表示と非表示を設定する
  1. 最後に、プロンプト ボックスの表示と非表示を設定する必要があります。ユーザーが入力するとき、入力ボックスの値が空でない場合はプロンプト ボックスが表示され、それ以外の場合はプロンプト ボックスは非表示になります。サンプル コードは次のとおりです。
  2. function showSuggestions() {
      var input = document.getElementById("input");
      var inputValue = input.value;
      
      var suggestions = document.getElementById("suggestions");
      
      if (inputValue.length === 0) {
        suggestions.innerHTML = "";
        suggestions.style.display = "none";
      } else {
        suggestions.innerHTML = "<p>输入:" + inputValue + "</p>";
        suggestions.style.display = "block";
      }
    }
上記のコードでは、

style.display プロパティを使用してプロンプト ボックスの表示状態を設定します。入力ボックスの値が空の場合は非表示 (none) に設定し、空でない場合は表示 (block) に設定します。

3. 完全なコードと効果の表示

完全な
script.js ファイルのコードは次のとおりです:

function showSuggestions() {
  var input = document.getElementById("input");
  var inputValue = input.value;
  
  var suggestions = document.getElementById("suggestions");
  
  if (inputValue.length === 0) {
    suggestions.innerHTML = "";
    suggestions.style.display = "none";
  } else {
    suggestions.innerHTML = "<p>输入:" + inputValue + "</p>";
    suggestions.style.display = "block";
  }
}

上記のコードを通じて、フォーム入力プロンプト機能。ユーザーが入力ボックスに文字を入力すると、プロンプト ボックスにユーザーの入力値が表示され、入力ボックスが空の場合、プロンプト ボックスは非表示になります。

概要

この記事では、JavaScript を使用してフォーム入力プロンプト機能を実装する方法を紹介します。入力ボックスの値を取得し、プロンプトボックスの内容と表示状態を設定することで、基本的なフォーム入力プロンプト機能を実装します。上記のコードとアイデアを使用すると、実際のニーズに応じて拡張および最適化して、より強力でパーソナライズされたフォーム入力プロンプト機能を実現できます。

以上がJavaScriptを使用してフォーム入力プロンプト機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。