스택 오버플로와 같은 워터 마크를 양식으로 구현하려면 어떻게해야합니까?

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

문제

입력 양식을보다 "사용 가능한"방식으로 스타일링하는 방법에 대해 이야기하는 튜토리얼을 본 것을 기억합니다.

본질적으로, 당신은 자리 표시 자 가치가 있으며 입력에 들어가면 힌트를 숨 깁니다.

이제 분명히 말해서 : 나는 힌트 (자리 표시 자 가치 텍스트)가 초점에 사라지는 것을 원하지 않고 처음으로 무언가를 입력하기 시작할 때 더 가벼워지기를 원하지 않습니다. 좋은 예 :

  • 양식을 확인하십시오 Aardvark. 이것이 바로 내 입력 양식을 갖고 싶은 방법입니다.

  • 우리의 자체 스택 오버플로 - 질문을하려고 할 때 입력 양식 내부를 클릭하면 텍스트를 즉시 숨기지 않습니다. 당신은 당신의 커서와 힌트를 볼 수 있습니다. 그러나 입력을 시작하면 힌트가 숨 깁니다. (위의 Aardvark 예와 같이 모두 함께 숨기지 않고 훨씬 더 가벼운 그늘에가는 것을 선호합니다.)

나는이 정확한 요구 사항으로 interwebz 어딘가에 튜토리얼을 읽은 것을 매우 명확하게 기억하지만, 나는 그것을 북마크하는 것을 잊었습니다.

제안/링크가 있습니까?

업데이트 : 최근에 jQuery 플러그인을 찾았습니다 현장 라벨 그것은 내가 원하는 것을 정확하게합니다. 또한, 여기 링크가 있습니다 동일한 플러그인의 개선. ]

도움이 되었습니까?

해결책

당신은 이것에서 시작할 수 있습니다 :

<input type="text" value="Your Hint Here"
       onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';"
       onKeyDown="if (this.value == 'Your Hint Here') {  
                      this.value = ''; this.style.color = '#000'; }">

힌트 문자열을 세 번 반복하지 않는 방식으로 JavaScript 함수를 사용하도록 위의 것을 조정해야 할 것입니다. 그러나 이것이 올바른 방향으로 갈 수 있기를 바랍니다.

또한 "지금 가입"이 vark.com 또한 텍스트 상자의 시작 부분을 끝에 두는 대신 커서 위치를 설정하십시오. 이것은 크로스 브라우저를 작동시키기에 약간 까다로울 수 있지만 다음 기사에서 제안한 솔루션을 확인할 수 있습니다. 조쉬 스토 돌라:

다른 팁

html5가 있습니다 placeholder 기인하다, 이 작업을 위해 설계되었습니다.

WebKit (Safari 및 Google Chrome에 사용되는 렌더링 엔진)만이 지금까지 지원합니다. 자리 표시자가 지원되지 않을 때 Daniel 's와 같은 JavaScript 폴백을 원할 것입니다.

그것은 사소합니다 확인하십시오 placeholder 자바 스크립트 지원.

입력 필드는 기본 텍스트와 사용자가 제공 한 텍스트를 동시에 모두 가질 수 없습니다. 당신이 요구하는 것을 정확하게 달성 할 수있는 유일한 방법은 입력 필드에 배경 이미지를 표시하는 것입니다. 고도로 두 텍스트 계층의 텍스트가 사용자에게 매우 혼란 스러울 것이므로이를 권장합니다. 이것을 달성하는 가장 일반적인 방법 (그리고 당신의 예시 사이트 vark.com에서 수행되는 것)은 다음을 사용하는 것입니다. 집중하다 텍스트를 지우는 방법 :

$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

stackoverflow (및 vark.com의 가입 양식)를 달성하기 위해 키 다운 이벤트:

$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

초점에 대한 색상 변경과 키 다운에 대한 텍스트에 대한 텍스트를 모두 달성하려면 다음과 같습니다.

// set text to grey on focus
$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).css('color', '#999999');
  }
});

// set text to black and clear default value on key press
$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
    $(this).css('color', '#000000');
  }
});

@Paul의 게시물에 응답하여 html5 자리 표시자는 내 안드로이드 에뮬레이터에 이상하게 행동합니다. 자리 표시자는 클릭을 클릭 할 때까지 멋지게 보이고 단어의 오른쪽에 커서로 검은 색이됩니다. 물론, 입력하면 사라지지만 직관적이지는 않습니다. 그래서 나는 몇 가지를 썼습니다 jQuery 그것을 고치려면 (내 html5/jquery badge는 어디에 있습니까?)

$(document).ready(function() {
    $('input[placeholder]').focus(function() {
        if (!$(this).val()) $(this).val('');
    });
});

나는 썼다 이 예 더 나은 이름이 부족하기 때문에 지속적인 자리 표시 자.

조금 더 마크 업이 필요합니다 div 포장 a label 그리고 input, 그러나 이는 다른 많은 문제를 해결하고 (예 : 양식 데이터 또는 비밀번호 필드에 들어가는 자리 표시자가 작동하지 않음) 실제 마크 업은 읽기가 매우 깨끗합니다. 당신은 다음과 같은 것으로 끝납니다.

<div class="input-wrapper">
    <label for="id_username">Username</label>
    <input id="id_username" type="text" name="username">
</div>

그리고 CSS와 JS를 포함한 후에는 작동합니다.

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