사용자 경험과 사용 편의성을 향상시키기 위해 일부 디자이너는 입력 상자와 같이 사용자가 웹 페이지에서 자주 사용하는 것을 최적화합니다. 일반 입력 상자는 어떻게 최적화되나요? 사용자 경험 측면에서 볼 때 사용자 단계를 단순화하고 사용자에게 더 편리하게 하면 사용성이 향상됩니다. 예를 들어 입력 상자 위에 마우스를 올리면 입력 상자의 색상이 변경되고 입력 상자의 기본 텍스트가 자동으로 선택됩니다. , 또는 클릭하여 입력 상자를 열 때 기본 내용을 자동으로 지우는 등.
이 효과는 복잡해 보이지만 실제로는 매우 간단합니다. 짧은 자바스크립트 코드만 있으면 해결할 수 있습니다. 다음은 여러 효과에 대한 코드를 소개합니다.
1. 입력 상자를 클릭하여 콘텐츠의 HTML 코드를 선택하세요.
이 코드에서 가장 중요한 부분은 onfocus 부분입니다. onfocus를 사용하지 않는 경우 onclick을 사용하면 동일한 효과를 얻을 수 있습니다. .선택하다()".
2. 마우스를 입력 상자 위로 가져갈 때 테두리 색상이나 배경색을 변경합니다.
이 효과에는 두 가지 방법이 있습니다. 첫 번째 방법은 CSS의 의사 요소를 사용하는 것입니다. ; 방법 2는 여전히 짧은 자바스크립트를 사용하고 있습니다. 방법 1의 html 코드는 다음 단락이 CSS에 추가된다는 점을 제외하면 위의 예와 동일합니다. 🎜>
코드 복사
입력 상자 위에 마우스를 올리면 입력 상자 테두리가 빨간색으로 바뀌는데, 이 방법은 Firefox 브라우저와 IE7 이상에서만 유효하고 IE6에서는 지원하지 않으므로 일정한 제한이 있습니다. 두 번째 방법의 코드는 마우스 호버 코드 섹션이 끝에 추가된다는 점을 제외하면 위의 예와 거의 동일합니다.
코드 복사
이것을 사용하세요 code, big 대부분의 브라우저가 이를 지원할 수 있습니다.
3. 입력 상자를 클릭하면 기본 텍스트가 사라집니다
입력 상자를 마우스로 클릭하면 원래 기본 텍스트가 사라집니다. 다른 새 내용을 입력한 다음 마우스를 다른 곳으로 이동하면 입력 상자의 새 내용이 변경되지 않고 그대로 유지됩니다. 새 내용을 입력하지 않으면 마우스가 입력 상자에서 나가고 기본 텍스트가 복원됩니다. 이 효과는 판단할 짧은 자바스크립트 조각을 추가하여 얻을 수 있습니다.
코드 복사
입력의 자리표시자 속성은 HTML5에서 직접 사용할 수 있습니다:
코드 복사