설명 텍스트가있는 텍스트 입력

Question

사용자가 텍스트를 입력 할 때까지 텍스트 입력에 설명 텍스트를 넣기 위해 Javascript (사이트에서 사용하는 JQuery 포함)가있는 쉬운 방법이 있는지 궁금합니다. .

예를 들어, 사용자가 입력을 클릭 할 때까지 검색 입력란에 '검색'이라는 단어를 입력하고 싶을 때 (선호 입력은 실제 입력보다 밝은 색상으로), 검색어가 입력 될 때까지 입력 할 수 있습니다. .

실제로 사용자가 단어 검색을 검색 할 수 있기 때문에 '검색'이라는 단어를 텍스트 입력 값으로 사용하고 싶지는 않습니다.

입력을 통해 단어 검색을 사용하여 <p> 요소를 절대 위치 지정하고 입력 (또는 입력)을 클릭했을 때이를 숨길 수 있습니다.

당신은 어떻게 생각하십니까? 이 끔찍한 잘못입니까?

Answer 1

저는 최근에 당신이 원하는 것을 수행하는 jQuery Form Example plugin에 부딪 혔습니다. 프로젝트의 github 페이지는 here입니다.

$('input#search').example('Search');

Answer 2

검색 입력의 초기 값을 "검색"으로 설정 한 다음 onClick 수신기를 추가하여 제거 할 수 있습니다. 그것은 검색하는 사용자의 능력에 영향을주지 않습니다

$("input.search-term").one("click", function() { $(this).removeAttr("value"); });

"검색." 이는 입력에 대해 <p> 또는 <label> 요소를 처리하려는 것보다 훨씬 더 깔끔한 접근법입니다.

편집 : 당신은 모두 옳습니다. 클릭당 가치가 떨어지면 UX가 좋지 않습니다. 그것이 내가 빨리 대답하기 위해 얻는 것입니다. :) 초기 값만 제거하도록 업데이트되었습니다.

Answer 3

수년 동안 labels.js으로 알려진 인기있는 "프로젝트"가 있었고, 이전에 youngpup.net의 Aaron Boodman이 직접 작성했습니다. 아이디어는 여전히 주위에 있으며 jQuery version (심지어 데모 # 4)이 있습니다.

Answer 4

나는 jQuery를에 이런 짓을 할 것이다 :

$("input.searchterm").click(function() { 
    var $input = $(this); 
    if ($input.val() == "enter search term") $input.val(""); 
}; 

이 방법으로 사용자는 다시 클릭시 이전에 입력 한 내용을 잃지 않을 것입니다. 이 값은 입력 필드에 지정한 기본값 인 경우에만 지워집니다.

Answer 5

내가 실제로 단어 '검색'텍스트 입력의 값을 갖고 싶어하지 않습니다이 플러그인을 사용하면 그냥이와 클릭에 사라지고 자리 표시 자 값을 표시 할 수 있습니다 그러나 사용자가 단어 검색을 검색 할 수있는 것이 중요하기 때문입니다.

그런 경우 텍스트 입력에 배경 이미지를 사용할 수 있습니다. CSS에서 포커스는 배경이 없어야하며 unfoucused는 그것을 가져야한다고 정의 할 수 있습니다. 이 솔루션은 javascript가 비활성화 된 경우에도 작동합니다.

업데이트 : IE는 지원하지 않으므로 FF, Opera 및 Chrome에서는 작동하지만 IE에서는 작동하지 않습니다. IE는 배경 이미지를 지원하므로 텍스트가 밝은 회색이면 문제가되지 않습니다.그리고 언제나 jquery를 사용하여 입력 필드의 분류를 변경할 수 있습니다.

Answer 6

이 기술은 흔히 워터 마킹이라고합니다.

Answer 7

내가 얼마 전에이 솔루션을 찾고있었습니다

와 함께 십자가 this

/** 
* @author Remy Sharp 
* @url http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/ 
*/ 

(function ($) { 

$.fn.hint = function (blurClass) { 
    if (!blurClass) { 
    blurClass = 'blur'; 
    } 

    return this.each(function() { 
    // get jQuery version of 'this' 
    var $input = $(this), 

    // capture the rest of the variable to allow for reuse 
     title = $input.attr('title'), 
     $form = $(this.form), 
     $win = $(window); 

    function remove() { 
     if ($input.val() === title && $input.hasClass(blurClass)) { 
     $input.val('').removeClass(blurClass); 
     } 
    } 

    // only apply logic if the element has the attribute 
    if (title) { 
     // on blur, set value to title attr if text is blank 
     $input.blur(function() { 
     if (this.value === '') { 
      $input.val(title).addClass(blurClass); 
     } 
     }).focus(remove).blur(); // now change all inputs to title 

     // clear the pre-defined text when form is submitted 
     $form.submit(remove); 
     $win.unload(remove); // handles Firefox's autocomplete 
    } 
    }); 
}; 

})(jQuery); 


$(function(){ 
    // find all the input elements with title attributes 
    $('input[title!=""]').hint(); 
}); 

Answer 8

당신이 체크 아웃 할 수 있습니다 : 기본적으로 http://www.newmediacampaigns.com/page/nmcformhelper

이 HTML 5 입력 요소에 대한 자리 속성을 지원 :

<input type="text" placeholder="Your browser supports placeholder text" size=38> 

WebKit (Chrome 및 Safari)에서는이 기능을 지원하지만 Firefox 및 IE와 같은 다른 브라우저의 경우이 스크립트를 사용하여 브라우저가 HTML 5 기능을 지원하지 않을 때 Javascript를 사용하여 효과를 시뮬레이션 할 수 있습니다.