jQuery 검색 입력 상자에 기본 텍스트를 추가합니다

jQuery : 간단하면서도 효과적인 가이드로 검색 창을 향상시킵니다! 이 튜토리얼은 검색 상자에 기본 텍스트를 추가하는 방법을 보여 주므로보다 사용자 친화적입니다. 이 솔루션은 클릭시 기본 텍스트가 사라지고 상자가 비어있을 때 다시 나타나고 호버에 대한 시각적 피드백을 제공합니다. 라이브 데모

참조 여기 JavaScript 코드는 다음과 같습니다

이 jQuery 코드는 사용자가 상호 작용 한 후 검색 상자가 비어 있는지 확인하기 위해

이벤트를 사용합니다. 비어 있으면 기본 텍스트를 설정합니다 HTML 구조 (자세히 표시되지 않음)는 단순히 입력 필드가 "검색"을 갖는 양식을 포함해야합니다. 아래의 CSS 스타일은 시각적 향상을 제공합니다 : 이 CSS는 호버의 불투명도를 제어하고, 기본 양식 스타일링을 제거하며, 입력 필드 및 검색 버튼의 크기와 스타일을 설정합니다.

검색 입력에 기본 텍스트 추가에 대한 자주 묻는 질문 (FAQ) 이 섹션에서는 HTML 및 CSS 접근 방식을 모두 다루는 검색 입력 필드에 기본 텍스트 추가와 관련된 일반적인 질문을 다룹니다. 원래 FAQ 섹션은 유지되지만 명확성과 간결함을 위해 다시 표시됩니다. 유익한 경우 특정 코드 예제가 포함됩니다 html 자리 표시 자 속성 기본 텍스트를 추가하는 간단한 방법으로 html

속성을 ​​사용하십시오. 예를 들면 :

$('#search').blur(function(){
    if (this.value == '') {
        this.value = 'Search BLOGOOLA';
    }
});

. 자리 표시 자 텍스트는 사용자 유형으로 사라집니다 CSS를 가진 자리 표시 자 텍스트 스타일

CSS를 사용하여 자리 표시 자 텍스트의 색상을 제어하십시오 blur 이 예제는 자리 표시 자 텍스트를 빨간색으로 설정합니다.

에 대한 브라우저 지원은 다양합니다. 이전 브라우저의 경우 공급 업체 접두사가 필요할 수 있습니다 기본 텍스트의 javaScript 속성이 종종 충분하지만 JavaScript를 사용하여 기본 텍스트를 동적으로 관리 할 수 ​​있습니다. 위의 제공된 jQuery 예제는 그러한 방법 중 하나입니다 아이콘 추가 CSS의 및 속성을 ​​사용하여 검색 창에 아이콘을 추가하십시오. 포커스에서 검색 창을 확장

#searchform { opacity:0.8 }
#searchform:hover { opacity:1.0 }
#searchform fieldset { border:0px; padding:0px; margin:0px; }
#searchform input { width:190px; height:16px; margin:0px 0px 0px 10px; padding:2px 5px 2px 5px; border-width:1px 1px 1px 1px; border-style:solid solid ridge solid; font-family:Arial, Helvetica, sans-serif; font-size:small; }
#searchform button{ float:right; width:30px; height:22px;  margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border-width:1px 1px 0px 1px; border-style:solid solid ridge solid; background-repeat:no-repeat; background-image:url('../images/search.png'); }
#searchform button:hover { cursor:pointer; background-color:#E2E2E2; }

CSS에서

의사 클래스를 사용하여 초점을 얻을 때 검색 창을 확장하십시오.

버튼 스타일링

내장 명확한 버튼 스타일링에는 의사 요소가 다르기 때문에 브라우저 특정 CSS가 필요합니다. WebKit 브라우저 (Chrome, Safari)의 경우 를 사용할 수 있습니다 키 Enter 키를 누르면 검색 상자가 요소 내에 있는지 확인하십시오. autofocus on page hoad

속성을 ​​사용하여 요소를 사용하여 페이지가로드 될 때 검색 상자에 자동으로 초점을 맞 춥니 다.

위 내용은 jQuery 검색 입력 상자에 기본 텍스트를 추가합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!