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

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

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

如何使用 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 コードを記述する

入力ボックスの値を取得する
まず、showSuggestions() で入力ボックスの値を取得する必要があります。＃＃＃関数。 getElementById メソッドを使用してテキスト入力ボックスの要素を取得し、value 属性を使用してその値を取得できます。サンプルコードは次のとおりです。

function showSuggestions() {
  var input = document.getElementById("input");
  var inputValue = input.value;
  
  // TODO: 在这里编写后续的代码
}

次に、入力ボックスの値を決定し、適切なプロンプト情報をプロンプトボックス。ここでは、プロンプトボックスの ID が
suggestions であると仮定します。サンプルコードは次のとおりです。

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

最後に、プロンプトボックスの表示と非表示を設定する必要があります。ユーザーが入力するとき、入力ボックスの値が空でない場合はプロンプトボックスが表示され、それ以外の場合はプロンプトボックスは非表示になります。サンプルコードは次のとおりです。

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 サイトの他の関連記事を参照してください。

JavaScript html if 字符串 JS 事件 display

声明：

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

前の記事：JavaScript を使用して画像のドラッグアンドドロップによる並べ替えを実装するにはどうすればよいですか?次の記事：JavaScript を使用して画像のドラッグアンドドロップによる並べ替えを実装するにはどうすればよいですか?

続きを見る