어떻게이 텍스트 입력 값이 자바 스크립트없이 작동하는지 확인 하시겠습니까?

Question

좋아요, 그래서 검색 상자를 클릭하면 사라지는 값을 가진 검색 창을 만들고 있습니다. stackoverflow 검색과 같지만 검색을 클릭하면 값이 다시 나타납니다. 나는 분명히하고 싶다. (나는 자바 스크립트에 대해 거의 안다.) 그러나 자바 스크립트가 활성화되지 않은 사용자들에게는 어떻게하면 빈 입력으로 만들 수 있을까? 여기에 자바 스크립트가 활성화 된 경우 어쩌면 내가 PHP를해야한다고 생각하지만 난보고 및 PHP 스크립트를 찾을 수 couldnt는

<INPUT type="text" name="q" value="Search using Business Name or Category..." onFocus="if(this.value == 'Search using Business Name or Category...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search using Business Name or Category...';}" />

내 코드입니까? 어떤 도움이라도 대단히 감사하겠습니다.

Answer 1

placeholder 속성을 사용하십시오.

<INPUT type="text" name="q" placeholder="Search using Business Name or Category..." value="" /> 

그런 다음 자리 표시 자 속성에 대한 지원없이 브라우저의 자리를 작동하게하는 자바 스크립트 feature detection를 사용합니다. 예를 들어

(안된) jQuery를 함께 Moderlizr를 사용하여 :

// Add placeholder support for browsers which don't support it. 
// TODO Special styling. 
if (!Modernizr.input.placeholder) { 
    $('input[placeholder][value=]') 
     .each(function() { 
      var $this = this; 

      $this.val($this.attr('placeholder')); 
     }) 
     .focus(function() { 
      var $this = this; 

      if ($this.val() === $this.attr('placeholder')) { 
       $this.val(''); 
      } 
     }) 
     .blur(function() { 
      var $this = this; 

      if ($this.val() === '') { 
       $this.val($this.attr('placeholder')); 
      } 
     }); 
} 

Answer 2

설정 자바 스크립트와 초기 값 (이것은 당신이 ID를 가지고 가정) : 내가 수정 생각 개인적으로

// Somewhere near the bottom of your document 
document.getElementById("q").value = "Search..."; 

내가 비록이 같은 물건에 대한 입력의 상단에 떠있는 별도의 요소를 사용하여 향하다 이것에 대한 가치는 더러운 트릭입니다.