js 호환 자리 표시자 attribute_javascript 기술에 대한 자세한 설명

.net 백엔드 개발 프로그래머로서 제 블로그의 대부분은 프런트엔드 관련 블로그 게시물입니다. 이제 방향을 바꿔서 프론트엔드 개발로 전환을 고려해볼 때가 된 걸까요...

조금 호언장담을 하자면, 최근 직업을 바꿔야 할지 말아야 할지 고민이 되네요.

프런트 엔드에 이어 이번에는 입력 상자의 자리 표시자 속성에 대해 이야기해 보겠습니다.

html5의 새로운 속성은 입력 상자에 값을 입력하지 않았을 때 표시되는 프롬프트 텍스트(사용자가 이해한 내용)입니다. 예:

매우 유용한 것 같지만 HTML을 지원하는 브라우저 버전에서만 표시할 수 있습니다. 이를 지원하지 않는 브라우저 버전의 경우 완벽함을 추구하는 저 같은 개발자에게는 매우 불편합니다.

인터넷에서 많은 정보를 찾았고 많은 전문가들이 이미 해결책을 찾았지만 모두 몇 가지 결함이 있습니다. 여기서는 통합하고 수정하겠습니다.

(다른 분들의 코드를 몇 개 읽었는지, 주소가 무엇인지 잊어버렸습니다. 다른 원저자들께 사과의 말씀을 전합니다. 저작권 문제가 있으시면 연락주세요! -.-)

제 생각에는 이런 확장은 브라우저 인터페이스 기능을 미화한 것과 같고, 저는 늘 자연스러움이 가장 아름답다고 주장합니다. 따라서 이 속성을 지원하는 브라우저 버전에서는 다른 수정 작업을 직접 수행하지 않을 것입니다.

먼저 속성이 지원되는지 확인하세요.

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

if (!('placeholder' in document .createElement( 'input'))) { }

지원되지 않는 경우 여기에 작업이 옵니다.

자리 표시자 속성이 있는 모든 input:text / input:password / textarea를 꺼내고 해당 자리 표시자 속성 값을 꺼낸 다음 함수를 모방하고 각 레이블 뒤에 레이블 레이블을 추가하여 입력 시 자리 표시자 값을 표시합니다. value 를 누르면 표시된 문자열이 지워지고, 입력된 값이 삭제되면 해당 문자열이 표시됩니다.

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

var $element = $(this), 자리 표시자 = $ element.attr('placeholder');

if (placeholder) {
// 텍스트 상자 ID
var elementId = $element.attr('id');
if (!elementId) {
var now = new Date( );
elementId = 'lbl_placeholder' now.getSeconds() now.getMilliseconds();
$element.attr('id', elementId);
}

// 자리 표시자의 값을 표시하기 위해 레이블 레이블을 추가합니다.
var $label = $('', {
html: $element.val() ? '' : 자리 표시자,
'for': elementId,
css:
{
위치: '절대',
커서: 'text',
              색상: '#a9a9a9',
              글꼴 크기: $ element.css('fontSize'),
fontFamily: $element.css('fontFamily')
}
}).insertAfter($element);

// 이벤트 바인딩
var _setPosition = function () {
$label.css({ marginTop: GetStringNumValue($element.css('marginTop')) 8 'px', marginLeft: '- ' (GetStringNumValue($element.css('width')) - 6) 'px' });
}
var _resetPlaceholder = function () {
if ($element.val()) { $ label.html(null); }
else {
_setPosition();
$label.html(placeholder);
}
}
_setPosition();
$ element.on('focus Blur input keyup propertychange Resetplaceholder', _resetPlaceholder);

코드는 매우 간단합니다. 참고하세요:

1. 라벨의 여백/왼쪽 여백 여기에 들여쓰기하세요.

2. GetStringNumValue()는 정규식을 사용하여 문자열에서 숫자를 추출하는 자체 정의된 메서드입니다. 예를 들어 "123px"는 123을 반환합니다.

3. IE에서 지원되지 않는 버전의 경우 propertychange는 정말 좋은 방법이자 완벽한 조합입니다! ...

4. 확장 메서드인 Resetplaceholder는 js를 사용하여 입력 상자의 값을 변경할 때(할당, 지우기) 자리 표시자의 해당 값을 설정하는 데 사용됩니다.

효과:

——IE8

——IE9