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

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

문제

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

예를 들어, 사용자가 입력을 클릭 할 때까지 텍스트 입력 (실제 입력보다 가벼운 색상)에 '검색'이라는 단어를 넣고 검색어를 입력 할 수 있습니다.

그래도 '검색'이라는 단어가 텍스트 입력의 값이되고 싶지는 않습니다. 사용자가 검색을 검색 할 수있는 것이 다소 중요하기 때문입니다.

나는 절대 포지셔닝을 생각하고 있었다u003Cp> 입력을 검색하고 (또는 입력)를 클릭 할 때 숨어있는 단어가있는 요소.

어떻게 생각해? 이것은 끔찍하게 잘못 인도 되었습니까?

도움이 되었습니까?

해결책

나는 최근에 부딪쳤다 jQuery 양식 예제 플러그인 그것은 당신이 원하는 것을합니다. 프로젝트의 GitHub 페이지는입니다 여기. 해당 플러그인을 사용하면 다음과 같이 클릭 할 때 사라질 자리 표시 자 값을 표시 할 수 있습니다.

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

다른 팁

검색 입력의 초기 값을 "검색"으로 설정 한 다음 OnClick 리스너를 추가하여 제거 할 수 있습니다.

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

사용자가 "검색"검색 능력에 영향을 미치지 않습니다. 이것은 finagle a를 시도하는 것보다 훨씬 더 깨끗한 접근법입니다. <p> 또는 <label> 입력에 대한 요소.

편집하다: 당신은 모두 절대적으로 옳습니다. 각 클릭마다 값을 제거하는 것은 UX가 좋지 않습니다. 그것이 제가 빨리 대답하기 위해 얻는 것입니다. :) 초기 값 만 제거하도록 업데이트되었습니다.

이것을 확인하고 싶을 수도 있습니다.http://www.newmediacampaigns.com/page/nmcformhelper

원래, HTML 5 지원합니다 자리 표시 자 입력 요소에 대한 속성 :

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

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

수년 동안 labels.js, Old Youngpup.net의 Aaron Boodman이 orignally 작성했습니다. 아이디어는 여전히 주변에 있고 존재합니다 jQuery 버전, 심지어 (데모 #4).

그래도 '검색'이라는 단어가 텍스트 입력의 값이되고 싶지는 않습니다. 사용자가 검색을 검색 할 수있는 것이 다소 중요하기 때문입니다.

이 경우 텍스트 입력에서 백그라운드 이미지를 사용할 수 있습니다. CSS에서 다음을 정의 할 수 있습니다. 초점에는 배경이 없어야하며 틀에 박힌 사람은 그것을 가져야합니다. 이 솔루션은 JavaScript가 비활성화되어 있어도 작동합니다.

업데이트 : FF, Opera 및 Chrome과 함께 테스트하고 작업하지만 IE는 지원하지 않기 때문에 : 초점은 백그라운드 이미지를 지원하므로 텍스트가 밝은 회색 인 경우 문제가되지 않아야합니다. 그리고 항상 jQuery를 사용하여 입력 필드에 분류 된 것을 변경할 수 있습니다.

나는 얼마 전에이 솔루션을 찾고 있었고 교차 이것

/**
* @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();
});

나는 jQuery에서 이런 일을 할 것입니다.

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

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

참고 로이 기술은 종종 호출됩니다 워터 마킹.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top