검색 필드의 기본값 설정 - 도와주세요!

StackOverflow https://stackoverflow.com/questions/1034281

  •  06-07-2019
  •  | 
  •  

문제

검색 필드의 기본값을 설정하려고합니다. 아이디어는 검색 필드에 사용자가 클릭 할 때까지 "검색"값이 있다는 것입니다. 그러면 비어 있어야합니다. 또한 "공백"인 한 (값으로 "검색"으로) 클래스 ".blank"가 있어야합니다.

나는 이것을 시도했다

<input autocomplete="off" class="" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="" />

지금까지 작동하지만 사이트를로드하면 필드가 비어 있습니다. 필드 내부를 먼저 클릭 한 다음 페이지 어딘가에 클릭하여 효과를 작동시켜야합니다.

나는 그것이 Onblur와 관련이 있다고 생각합니다. 어떤 아이디어?

감사!

도움이 되었습니까?

해결책

이것은 워터 마크라고합니다. 보다 http://digitalbush.com/projects/watermark-input-plugin/ 예를 들어

다른 팁

또 다른 아이디어는 자리 표시자를 입력 유형에 넣는 것입니다. (이것은 HTML5입니다.)

<input type=text placeholder="Default text here"/>

이런 식으로 텍스트 필드는 회색 텍스트 색상으로 표시됩니다. 기본 텍스트는 여기에 표시됩니다. 클릭하면 텍스트를 제거하고 현재 텍스트로 바꾸고 비어 있으면 돌아옵니다.

그냥 기본값 '검색'하드 코드를 제공하십시오.

<input ... type="text" value="Search" />

초기 값을 Search, 입력 태그에 직접 :

<input autocomplete="off" class="blank" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="Search" />

초기 클래스도 설정합니다 blank 또한.

문제를 발견했습니다. 내 실수 : 사용자가 다른 곳을 클릭 할 때 Onblur가 호출됩니다. Onload는 태그 본문과 프레임 세트에만 허용됩니다. 해결책은 serverside 어딘가에 기본값을 설정하는 것입니다 (검색어가 제출되지 않은 경우 application_controller의 경우).

어쨌든 감사합니다!

Blur는 필드가 초점을 풀면 초점이 초점을 맞추기 전까지는 초점이 느슨해 질 수 없으므로 필드를 클릭 한 다음 클릭하여 작동하는 것을 확인해야합니다. 기본적으로 클래스를 .blank로 설정해 보셨습니까?

<input autocomplete="off" class="blank" ....

여기 내가 이것을하는 데 사용하는 스 니펫이 있습니다. 더 간단한 방법이있을 수 있지만 이것은 작동합니다. 클래스가있는 모든 항목 .ClearDefault는 First MouseOver에서 값이 지워집니다. 클래스가있는 모든 항목 .SetClearDefault는 기본값을 지우고 사용자가 상자에 아무것도 넣지 않으면 마우스 아웃의 기본값으로 재설정됩니다.

function ClearDefault(item) {
    // clear the default value of a form element
    if (item.defaultValue == undefined)
        item.defaultValue = item.value;
    if (item.defaultValue == item.value)
        item.value = '';
} // ClearDefault

function SetDefault(item) {
    // if item is empty, restore the default value
    if (item.value == '')
        item.value = item.defaultValue;
} // SetDefault

$(document).ready(function() {
    $(".cleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
    $(".setcleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
        .mouseout(function(){
            SetDefault(this);
        });
    /*
    */
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top