JavaScriptを使用してフォーム入力プロンプト機能を実装するにはどうすればよいですか?-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-10-18 10:27:23

オリジナル

1233 人が閲覧しました

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