사용자 경험과 사용 편의성을 향상시키기 위해 일부 디자이너는 입력 상자와 같이 사용자가 웹 페이지에서 자주 사용하는 것을 최적화합니다. 일반 입력 상자는 어떻게 최적화되나요? 사용자 경험 측면에서 볼 때 사용자 단계를 단순화하고 사용자에게 더 편리하게 하면 사용성이 향상됩니다. 예를 들어 입력 상자 위에 마우스를 올리면 입력 상자의 색상이 변경되고 입력 상자의 기본 텍스트가 자동으로 선택됩니다. , 또는 클릭하여 입력 상자를 열 때 기본 내용을 자동으로 지우는 등. 이 효과는 복잡해 보이지만 실제로는 매우 간단합니다. 이 문제를 해결하려면 짧은 JavaScript 코드만 있으면 됩니다. 다음은 여러 효과의 코드를 소개합니다.
1. 입력 상자를 클릭하여 콘텐츠의 HTML 코드를 선택하세요.
<form id="form1" name="form1" method="post" action=""> <label for="textfield">输入内容：</label> <input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()" /> </form>
2. 입력창 위에 마우스를 올렸을 때 테두리 색상이나 배경색을 변경합니다
이 효과에는 두 가지 방법이 있습니다. 방법 1은 CSS의 의사 요소를 사용하는 것입니다. 초점, 방법 2는 여전히 javascript의 작은 부분을 사용하는 것입니다. 방법 1의 html 코드는 위의 예와 동일합니다. 다음 단락이 CSS에 추가됩니다.
입력:호버 { 테두리:1px 솔리드 #F00 }
입력 상자 위에 마우스를 올리면 입력 상자의 테두리가 빨간색으로 변합니다. 그러나 이 방법은 Firefox 브라우저에서만 유효하며 IE6 이상에서는 지원하지 않으므로 특정 제한이 있습니다. 두 번째 방법의 코드는 마우스 호버 코드 섹션이 끝에 추가된다는 점을 제외하면 위의 예와 대부분 동일합니다.
<form id="form1" name="form1" method="post" action=""> <label for="textfield">输入内容：</label> <input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()"onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" /> </form>
이 코드를 사용하면 대부분의 브라우저에서 지원할 수 있습니다.
3. 입력 상자를 클릭하면 기본 텍스트가 사라집니다
입력 상자를 마우스로 클릭하면 원래 기본 텍스트가 사라지는 효과도 있습니다. 다른 새 내용을 입력한 다음 마우스를 다른 곳으로 이동하면 입력 상자의 새 내용이 변경되지 않고 그대로 유지됩니다. 새 내용을 입력하지 않으면 마우스가 입력 상자에서 나가고 기본 텍스트가 복원됩니다. 이 효과는 자바스크립트의 짧은 섹션만 추가하면 얻을 수 있습니다:
<form id="form1" name="form1" method="post" action="">
<label for="textfield">输入内容：</label>
<input name="textfield" type="text" id="textfield" value="Dreamweaver" onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" onFocus="if (value =='Dreamweaver'){value =''}" onBlur="if (value ==''){value='Dreamweaver'}"/>
</form>