미리 작성된 텍스트 상자 (기본 설명 텍스트가있는 텍스트 상자) 클라이언트 쪽을 어떻게 처리합니까?

Question

양식으로 작업 중이며 프런트 엔드 개발자는 텍스트 상자 안에 기본 텍스트가 있습니다. 예를 들어 우편 번호 입력 상자에는 레이블이 없지만 상자에 미리 채워진 텍스트가 있습니다. 다음은 입력 예입니다.

<input id="place" name="place" type="text" value="(City, State or Zip Code)" 

이 입력은 검색 양식에 있습니다. 이 입력은 다른 입력과 함께 ajax를 통해 서버로 전달됩니다. 결과가 서버에 도달하면 "place"라는 포스트 변수가 있으며 사용자가 변경하지 않은 경우 값은 "(City, State or Zip Code)"입니다. 기본 텍스트가 변경되지 않은 경우 (입력 내용을 입력하지 않은 경우) 서버가이 $ _post 변수를 비어있는 것으로 볼 수 있도록 프론트 엔드 솔루션이 있는지 쉽게 궁금합니다. 이미 서버를 확인할 수 있다는 것을 알고 있습니다.

if $_post[place] == "(City, State or Zip Code)" 
//place is empty, omit it from the search query 

더 나은 방법이있는 경우 더 나은 방법을 찾고 있습니다.

기본 입력 텍스트는 어떻게 처리합니까?

감사합니다.

편집 요약 : 요약하면 사용자가 변경하지 않은 경우이 입력 및 다른 입력을 서버에 공백으로 전달하는 방법을 찾고 있습니다. 위의 $ _post [place]를 사용하지 않고 서버 사이드에서, 그리고 가능한 경우 클라이언트 측에서도 사용하고 싶습니다.

Answer 1

당신은 그것을 위해 자리 표시 자 속성을 사용한다. 그리고 오래된 브라우저가 원한다면 비어있는 입력이나 JS 로의 폴백으로 우아하게 저하되도록합니다 (지원되는지 확인하는 방법 : http://davidwalsh.name/html5-placeholder). 당신이 jQuery를 사용하는 경우

Answer 2

브라우저 (브라우저에서 실행 중)에서 현재 값과 기본값을 비교할 수 있습니다. 기본값 인 경우, 요청에서 해당 특정 변수를 따라 Ajax를 전달하지 마십시오. http://www.w3schools.com/html5/att_input_placeholder.asp

이이 자리 값을 표시하지만 서버로 전송하지 않습니다 :

Answer 3

크리스 D.이 Kitsune에 귀하의 질문에 대답하기 위해, 당신은 click()에 data()의 기본 값을 저장하고 요청을 보낼 때 다음 저장 한 대 새로운 데이터를 비교할 수 있습니다.
@valentinasplaceholder은 HTML5에서만 지원되므로 찾고자하는 내용이 아닐 수도 있습니다.

$('input').click(function(){ $(this).data('default', $(this).val()); }); 

// On your request 
if ($('input').val() === $('input').data('default')) {}