HTML5는 Input의 새로운 유형 유형, 양식 검증 등과 같은 웹 양식을 많이 향상 시켰습니다. 자리 표시자는 HTML5에 추가 된 또 다른 속성입니다. 입력 또는 TextArea 가이 속성을 설정하면이 값의 내용이 텍스트 상자에 회색 단어 프롬프트로 표시됩니다. 텍스트 상자가 초점을 맞출 때 프롬프트 텍스트가 사라집니다. 과거에는이 효과를 달성하기 위해 JavaScript를 사용하여이를 제어했습니다.
자리 표시자는 새로운 속성이므로 현재 몇 개의 브라우저 만 지원합니다. 브라우저가 지원하는지 여부를 감지하는 방법은 무엇입니까? (더 많은 HTML5/CSS3 기능 감지에 액세스 할 수 있습니다)
함수 hasplaceboldersUpport () {
document.createelement ( '입력')에서 '자리 표시 자'를 반환합니다.
}
기본 프롬프트 텍스트는 회색이며 CSS를 통해 텍스트 스타일을 변경할 수 있습니다.
/ * all */:: -WebKit-input-placeholder {color :#f00; } 입력 : -Moz-PlaceHolder {색상 :#f00; } / * 개인 : webkit * /#field2 ::- webkit-input-placeholder {color :#00f; }#field3 ::- webkit-input-placeholder {color :#090; 배경 : Lightgreen; 텍스트 변환 : 대문자; }#field4 ::- webkit-input-placeholder {font 스타일 : 이탈리아; 텍스트 결정 : 오버 라인; 문자 스페이스 : 3px; 색상 :#999; } / * 개인 : Mozilla * /#field2 : -Moz-PlaceHolder {color :#00f; }#field3 : -Moz-PlaceHolder {색상 :#090; 배경 : Lightgreen; 텍스트 변환 : 대문자; }#field4 : -Moz-PlaceHolder {font 스타일 : 이탈리아; 텍스트 결정 : 오버 라인; 문자 스페이스 : 3px; 색상 :#999; }자리 표시자를 지원하지 않는 다른 브라우저와 호환됩니다.
var 자리 표시 자 = {
_support : (function () {
document.createelement ( '입력')에서 '자리 표시 자'를 반환합니다.
}) (),
// 프롬프트 텍스트의 스타일은 페이지의 다른 위치에서 정의되어야합니다.
ClassName : 'ABC',
init : function () {
if (! placeholder._support) {
// TextArea가 처리되지 않았으며 필요한 작업을 추가하십시오.
var inputs = document.getElementsByTagName ( 'input');
위장기. 생성 (입력);
}
},
작성 : 함수 (입력) {
var 입력;
if (! inputs.length) {
입력 = [입력];
}
for (var i = 0, length = inputs.length; i <length; i ++) {
입력 = 입력 [i];
if (! placeholder._support && input.attributes && input.attributes.placeholder) {
자리 표시기 ._SetValue (입력);
input.addeventListener ( 'Focus', function (e) {
if (this.value === this.attributes.placeholder.nodevalue) {
this.value = '';
this.classname = '';
}
}, 거짓);
input.addeventListener ( 'blur', function (e) {
if (this.value === '') {
자리 표시기 ._SetValue (this);
}
}, 거짓);
}
}
},
_setValue : 함수 (입력) {
input.value = input.attributes.placeholder.nodevalue;
input.classname = placeholder.classname;
}
};
// 페이지 초기화시 모든 입력을 초기화합니다
//placeholder.init ();
// 또는 요소를 별도로 설정합니다
//placeholder.create(document.getElementById('t1 '));