> 웹 프론트엔드 > JS 튜토리얼 > jQuery_jquery를 기반으로 입력 상자에 값이 없을 때 지정된 데이터를 자동으로 표시하는 구현 코드

jQuery_jquery를 기반으로 입력 상자에 값이 없을 때 지정된 데이터를 자동으로 표시하는 구현 코드

WBOY
풀어 주다: 2016-05-16 18:11:29
원래의
1003명이 탐색했습니다.

【해결책】

 1. 준비

 (1) 입력창

코드 복사 코드는 다음과 같습니다.



 (2 ) CSS 코드
코드 복사 코드는 다음과 같습니다.

input.helpText { 색상: #aaa;}

(3) 변환 방법
코드 복사 코드는 다음과 같습니다.

function switchText()
{
if ($(this).val() == $(this).attr('title'))
$(this ).val('') .removeClass('helpText');
else if ($.trim($(this).val()) == '')
$(this).addClass(' helpText').val($ (this).attr('title'))
}

(4) 구체적인 구현
코드 복사 코드는 다음과 같습니다:

$('input[type=text][title!=""]').each(function () {
if ($.trim($(this).val()) == '') $(this).val($(this).attr('title'))
if ($(this).val() = = $(this).attr('title')) $(this).addClass('helpText')
}).focus(switchText).blur(switchText); ;

$(' form').submit(function() {
$(this).find('input[type=text][title!=""]').each(함수 () {
if ($( this).val() == $(this).attr('title')) $(this).val('')
}); }));


2. 참고 기사
http://webservices.blog.gustavus.edu/2008/06/23/text -input-example-text-with-jquery /
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿