js css はフォームのユーザビリティ_javascript スキルを高めるためにプロンプ​​ト テキストを実装します

通常、フォームをデザインするときは、検索ボックスに「キーワードを入力してください」というプロンプトを追加し、検索ボックスがフォーカスを取得したりフォーカスを失ったりしたときに、適切なタイミングでキーワードを非表示にしたり表示したりします。 common メソッドは値を使用して設定します:

コードをコピー コードは次のとおりです:

<ボタン> ;/button>

<script> <br>document.getElementById("keyword").onfocus = function() { <br>if (document.getElementById("keyword") .value == " キーワードを入力してください") { <br>document.getElementById("keyword").value = ""; <br>} <br>} <br>document.getElementById("keyword").onblur = function() { <br>if (document.getElementById("keyword").value == "") { <br>document.getElementById("keyword").value = "キーワードを入力してください"; } <br>} <br>document.getElementById("search").onsubmit = function() { <br>var キーワード = document.getElementById("keyword").value <br>if (keyword == "" || キーワード == "キーワードを入力してください") { <br>alert("キーワードを入力してください"); <br>return <br>} <br></ script> <br><br> <br>このようなコードは目的の機能を実現しますが、その理由は、「キーワードを入力してください」などのテキストは単なるプロンプト テキストであり、値ではないためです。技術的には大きな違いはありませんが、多くの場合、たとえば、ユーザーが入力したテキストを黒色で表示するのに、プロンプトのテキストを灰色で表示する場合があります。 <br>CSS を使用してより良い方法を実現する方法を見てみましょう: </div> <br><br><br><div class="codetitle">コードをコピーします<span><a style="CURSOR: pointer" data="64823" class="copybut" id="copybut64823" onclick="doCopy('code64823')"><u> コードは次のとおりです:</u></a> </span> </div>#wrapper { 位置: 相対; 表示: 1px; } <div class="codebody" id="code64823"> </style> <br><form id="search"> <br><label for="keyword" id="description" >キーワードを入力してください</label> <br><input type="text" id="keyword" name="keyword"> <br><button> button> <br></form> <br><script> <br>window.onload = function() { <br>if (!document.getElementById("keyword").value) { .getElementById("説明").style.display = "インライン"; <br>} <br>}; <br>document.getElementById("キーワード").onfocus = function() { <br>if (!document .getElementById("キーワード").value) { <br>document.getElementById("説明").style.display = "なし"; <br>} <br>} <br>document.getElementById("キーワード") .onblur = function() { <br>if (!document.getElementById("keyword").value) { <br>document.getElementById("description").style.display = "inline">} <br>} <br>document.getElementById("search").onsubmit = function() { <br>if (!document.getElementById("keyword").value) { <br>alert("キーワードを入力してください" ); <br>return false; <br>} <br>return <br>} <br></script>


この実装には多くの CSS と JS コードが必要です少し異なりますが、プロンプト テキスト (CSS のposition 属性によって配置) を表示するための label を導入することで、構造はより合理的になり、値自体はより単純になり、プロンプト テキストとユーザーが入力したテキストが表示されます。色の濃さなどスタイルをコントロールしやすくなり、フォームの操作性が向上します。