js CSS는 양식 유용성_javascript 기술을 높이기 위해 프롬프트 텍스트를 구현합니다.

우리는 일반적으로 양식을 디자인할 때 몇 가지 프롬프트 텍스트를 추가합니다. 예를 들어 검색 상자에 "키워드를 입력하세요"라는 메시지를 표시하고 검색 상자에 초점이 맞춰지거나 초점을 잃을 때 적시에 이를 숨기고 표시합니다. common 값을 설정하는 방법:

코드 복사 코드는 다음과 같습니다.

<버튼> ;/버튼>

<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>} <br>document.getElementById("search").onsubmit = function() { <br>var 키워드 = document.getElementById("keyword").value <br>if (keyword == "" || 키워드 == "키워드를 입력하세요") { <br>alert("키워드를 입력하세요") <br>return false <br>} <br>return true; script> <br><br> <br>이러한 코드는 우리가 원하는 기능을 달성하지만 깨끗하지 않습니다. 그 이유는 "키워드를 입력하세요"와 같은 텍스트는 값이 아닌 프롬프트 텍스트이기 때문입니다. 기술적으로는 큰 차이가 없지만 많은 경우 여전히 문제가 있는 것 같습니다. 예를 들어 프롬프트 텍스트를 회색으로 표시하고 사용자가 입력한 텍스트는 검은색으로 표시할 수 있습니다. </div>CSS를 사용하여 더 나은 방법을 찾는 방법을 살펴보겠습니다. <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><style> <div class="codebody" id="code64823">#wrapper { 위치: 상대; 표시: 인라인; } <br>#description { 위치: 절대; 색상: #999999; <br> </style> <br><form id="search"> <br><div id="wrapper"> <br><label for="keyword" id="description" >키워드를 입력하세요</label> <br><input type="text" id="keyword" name="keyword"> <br></div>검색</ 버튼> <br></form> <br>window.onload = function() { <br>if (!document.getElementById("keyword").value) { <br>document .getElementById("description").style.display = "inline"; <br>} <br>}; <br>document.getElementById("keyword").onfocus = function() { <br>if (!document .getElementById("keyword").value) { <br>document.getElementById("description").style.display = "none"; <br>} <br>} <br>document.getElementById("keyword") .onblur = function() { <br>if (!document.getElementById("keyword").value) { <br>document.getElementById("description").style.display = "inline" <br>} <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 속성을 통해 위치 지정)를 표시하기 위해 레이블을 도입함으로써 값 자체가 더 간단해지고 프롬프트 텍스트와 사용자가 입력한 텍스트가 더 합리적입니다. 색상의 깊이와 같은 스타일을 쉽게 제어할 수 있어 형태 사용성이 향상됩니다.