Internet Explorer용 자리 표시자 입력
는 HTML5 는했습니다.placeholder 책임을 돌리다input요소: 회색으로 표시된 기본 텍스트를 표시할 수 있습니다.
안타깝게도 IE 9를 포함한 Internet Explorer는 이를 지원하지 않습니다.
이미 자리 표시자 시뮬레이터 스크립트가 있습니다.일반적으로 기본 텍스트를 입력 필드에 입력하고 회색으로 표시한 다음 입력 필드에 포커스를 맞추는 즉시 다시 제거합니다.
이 방법의 단점은 자리 표시자 텍스트가 입력 필드에 있다는 것입니다.따라서:
- 스크립트가 입력 필드가 비어 있는지 여부를 쉽게 확인할 수 없음
- 서버측 처리는 자리 표시자를 데이터베이스에 삽입하지 않으려면 기본값과 대조해야 합니다.
입력 자체에 자리 표시자 텍스트가 없는 솔루션을 원합니다.
HTML5 Cross Browser Polyfills의 "Web Forms : input placeholder" 섹션을 볼 때 jQuery-html5-placeholder를 보았습니다.
IE9으로 데모를 해봤는데, 당신의 것을 감싼 것 같습니다.<input>스팬과 함께 레이블과 자리 표시자 텍스트를 겹칩니다.
<label>Text:
<span style="position: relative;">
<input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
<label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
</span>
</label>
거기에 다른 심들도 있는데 다 안 봤어요.그 중 하나인 Placeholders.js는 자신을 "의존 관계 없음(대부분의 자리 표시자 폴리필 스크립트와 달리 jQuery를 포함할 필요가 없음)"이라고 광고합니다.
편집: "무엇을"하는 "방법"에 더 관심이 있는 사람들을 위해, 이것을 하는 jQuery 플러그인을 만드는 과정을 거치는 고급 HTML5 자리 표시자 폴리필을 만드는 방법.
또한 Firefox 및 Chrome과는 다른 IE10에서 자리 표시자 텍스트가 어떻게 포커스로 사라지는지에 대한 의견은 IE10에서 자리 표시자 포커스 유지를 참조하십시오.이 문제에 대한 해결책이 있는지 확실하지 않습니다.
제가 경험한 최고의 것은 https://github.com/mathiasbynens/jquery-placeholder 입니다. (html5please.com 에서 추천합니다.http://afarkas.github.com/webshim/demos/index.html 은 또한 훨씬 더 광범위한 폴리필 라이브러리 중에서도 좋은 솔루션을 제공합니다.
jQuery 구현을 사용하면 제출할 때 기본값을 쉽게 제거할 수 있습니다.다음은 예시입니다.
$('#submit').click(function(){
var text = this.attr('placeholder');
var inputvalue = this.val(); // you need to collect this anyways
if (text === inputvalue) inputvalue = "";
// $.ajax(... // do your ajax thing here
});
오버레이를 찾고 계시다는 것을 알고 있지만, 이 경로를 쉽게 사용할 수 있는 방법을 원하실 수도 있습니다(위에 제가 작성한 내용을 알고 있습니다).그렇다면, 제 프로젝트를 위해 이 글을 썼는데 정말 잘 작동하고(jQuery가 필요) 전체 사이트를 구현하는 데 단 몇 분밖에 걸리지 않습니다.처음에는 회색 텍스트, 초점을 맞출 때는 밝은 회색, 타이핑할 때는 검은색 텍스트를 제공합니다.또한 입력 필드가 비어 있을 때마다 자리 표시자 텍스트를 제공합니다.
먼저 양식을 설정하고 입력 태그에 자리 표시자 속성을 포함합니다.
<input placeholder="enter your email here">
이 코드를 복사해서 placeholder.js로 저장하면 됩니다.
(function( $ ){
$.fn.placeHolder = function() {
var input = this;
var text = input.attr('placeholder'); // make sure you have your placeholder attributes completed for each input field
if (text) input.val(text).css({ color:'grey' });
input.focus(function(){
if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.blur(function(){
if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' });
});
input.keyup(function(){
if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.mouseup(function(){
if (input.val() === text) input.selectRange(0,0);
});
};
$.fn.selectRange = function(start, end) {
return this.each(function() {
if (this.setSelectionRange) { this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
})( jQuery );
한 입력에만 사용하려면
$('#myinput').placeHolder(); // just one
브라우저가 HTML5 자리 표시자 속성을 지원하지 않을 때 사이트의 모든 입력 필드에 이를 구현하는 것을 권장합니다.
var placeholder = 'placeholder' in document.createElement('input');
if (!placeholder) {
$.getScript("../js/placeholder.js", function() {
$(":input").each(function(){ // this will work for all input fields
$(this).placeHolder();
});
});
}
IE에서 몇 가지 제안을 시도하고 문제를 확인한 후 다음과 같이 작동합니다.
https://github.com/parndt/jquery-html5-placeholder-shim/
제가 좋아한 것은 js 파일을 포함하는 것 뿐입니다.그것을 시작하거나 할 필요가 없습니다.
- IE9+에서만 작동합니다.
다음 솔루션은 자리 표시자 속성을 가진 입력 텍스트 요소에 바인딩됩니다.IE에 대해서만 자리 표시자 동작을 에뮬레이트하고 변경되지 않은 경우 제출 시 입력의 값 필드를 지웁니다.
이 스크립트를 추가하면 IE가 HTML5 자리 표시자를 지원하는 것 같습니다.
$(function() {
//Run this script only for IE
if (navigator.appName === "Microsoft Internet Explorer") {
$("input[type=text]").each(function() {
var p;
// Run this script only for input field with placeholder attribute
if (p = $(this).attr('placeholder')) {
// Input field's value attribute gets the placeholder value.
$(this).val(p);
$(this).css('color', 'gray');
// On selecting the field, if value is the same as placeholder, it should become blank
$(this).focus(function() {
if (p === $(this).val()) {
return $(this).val('');
}
});
// On exiting field, if value is blank, it should be assigned the value of placeholder
$(this).blur(function() {
if ($(this).val() === '') {
return $(this).val(p);
}
});
}
});
$("input[type=password]").each(function() {
var e_id, p;
if (p = $(this).attr('placeholder')) {
e_id = $(this).attr('id');
// change input type so that the text is displayed
document.getElementById(e_id).type = 'text';
$(this).val(p);
$(this).focus(function() {
// change input type so that password is not displayed
document.getElementById(e_id).type = 'password';
if (p === $(this).val()) {
return $(this).val('');
}
});
$(this).blur(function() {
if ($(this).val() === '') {
document.getElementById(e_id).type = 'text';
$(this).val(p);
}
});
}
});
$('form').submit(function() {
//Interrupt submission to blank out input fields with placeholder values
$("input[type=text]").each(function() {
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
}
});
$("input[type=password]").each(function() {
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
}
});
});
}
});
간단한 기능을 제안합니다.
function bindInOut(element,value)
{
element.focus(function()
{
if(element.val() == value) element.val('');
}).
blur(function()
{
if(element.val() == '') element.val(value);
});
element.blur();
}
그리고 이를 사용하려면 다음과 같이 부릅니다.
bindInOut($('#input'),'Here your value :)');
이 방법을 사용하여 꽤 간단한 해결책을 찾았습니다.
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
이건 재크리 해킹이고 내 프로젝트에 완벽하게 성공했습니다.
다음을 사용할 수 있습니다.
var placeholder = 'search here';
$('#search').focus(function(){
if ($.trim($(this).val()) === placeholder){
this.value ='';
}
}).blur(function(){
if ($.trim($(this).val()) === ''){
this.value = placeholder;
}
}).val(placeholder);
이와 같이 간단합니다.
$(function() {
...
var element = $("#selecter")
if(element.val() === element.attr("placeholder"){
element.text("").select().blur();
}
...
});
이 문제를 해결하기 위해 jquery plugin을 작성했습니다.무료입니다.
JQuery 디렉토리:
http://plugins.jquery.com/project/kegles-jquery-placeholder
사이트: www.kegles.com.br/jquery-placeholder/
사용자 지정 색상을 허용하고 초점을 맞출 때 입력을 지우는 다른 동작을 사용하는 간단한 자리 표시자 JQuery 스크립트를 생각해 냈습니다.파이어폭스와 크롬의 기본 자리 표시자를 대체하고 IE8에 대한 지원을 추가합니다.
// placeholder script IE8, Chrome, Firefox
// usage: <input type="text" placeholder="some str" />
$(function () {
var textColor = '#777777'; //custom color
$('[placeholder]').each(function() {
(this).attr('tooltip', $(this).attr('placeholder')); //buffer
if ($(this).val() === '' || $(this).val() === $(this).attr('placeholder')) {
$(this).css('color', textColor).css('font-style','italic');
$(this).val($(this).attr('placeholder')); //IE8 compatibility
}
$(this).attr('placeholder',''); //disable default behavior
$(this).on('focus', function() {
if ($(this).val() === $(this).attr('tooltip')) {
$(this).val('');
}
});
$(this).on('keydown', function() {
$(this).css('font-style','normal').css('color','#000');
});
$(this).on('blur', function() {
if ($(this).val() === '') {
$(this).val($(this).attr('tooltip')).css('color', textColor).css('font-style','italic');
}
});
});
});
플레이스홀더는 제가 작성한 초경량 드롭인 플레이스홀더 jQuery 폴리필입니다.1KB미만입니다.
이 라이브러리를 통해 귀하의 두 가지 우려 사항을 모두 해결할 수 있습니다.
플레이스홀더는 플레이스홀더의 결과로 입력 필드에 텍스트가 있을 때 예기치 않은 반환 값이 발생하지 않도록 jQuery $.fn.val() 함수를 확장합니다.따라서 필드의 값에 액세스하기 위해 jQuery API를 고수하면 변경할 필요가 없습니다.
플레이스홀더는 양식 제출을 수신하며, 서버가 단순히 빈 값을 볼 수 있도록 필드에서 플레이스홀더 텍스트를 제거합니다.
다시 말하지만, 플레이스홀더의 목표는 플레이스홀더 문제에 간단한 드롭인 솔루션을 제공하는 것입니다.Github에서 Placeholdr 지원에 관심 있는 사항이 있으면 알려주세요.
플러그인을 삽입하고 ie를 확인하는 것은 완벽하게 작동하는 jquery.placeholder.js입니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.placeholder.js"></script>
<script>
// To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
// $.fn.hide = function() { return this; }
// Then uncomment the last rule in the <style> element (in the <head>).
$(function() {
// Invoke the plugin
$('input, textarea').placeholder({customClass:'my-placeholder'});
// That’s it, really.
// Now display a message if the browser supports placeholder natively
var html;
if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
} else if ($.fn.placeholder.input) {
html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
}
if (html) {
$('<p class="note">' + html + '</p>').insertAfter('form');
}
});
</script>
여기 IE 8 이하의 자리지킴이를 생성해주는 순수 자바스크립트 기능(jquery 필요 없음)이 있고 비밀번호에도 적용됩니다.HTML5 자리 표시자 속성을 읽고 양식 요소 뒤에 공백 요소를 만들고 양식 요소 배경을 투명하게 만듭니다.
/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {
for (var e = 0; e < document.fm.elements.length; e++) {
if (fm.elements[e].placeholder != undefined &&
document.createElement("input").placeholder == undefined) { // IE 8 and below
fm.elements[e].style.background = "transparent";
var el = document.createElement("span");
el.innerHTML = fm.elements[e].placeholder;
el.style.position = "absolute";
el.style.padding = "2px;";
el.style.zIndex = "-1";
el.style.color = "#999999";
fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
fm.elements[e].onfocus = function() {
this.style.background = "yellow";
}
fm.elements[e].onblur = function() {
if (this.value == "") this.style.background = "transparent";
else this.style.background = "white";
}
}
}
}
add_placeholders(document.getElementById('fm'))<form id="fm">
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<textarea name="description" placeholder="Description"></textarea>
</form>참고: 이 폴리필의 저자는 이 파일이 "상상할 수 있는 거의 모든 브라우저에서 작동한다"고 주장하지만 IE11에 대한 의견은 그렇지 않지만 IE11은 대부분의 최신 브라우저와 마찬가지로 기본 지원을 제공합니다.
Placeholders.js는 내가 본 것 중 최고의 자리 표시자 폴리필이며, 가볍고, JQuery에 의존하지 않으며, 다른 오래된 브라우저(IE뿐만 아니라)를 포함하며, 숨김 입력 및 한 번 실행 가능한 자리 표시자 옵션이 있습니다.
저는 jquery.placeholder labels를 사용합니다.이를 바탕으로 한 것으로 여기서 데모를 할 수 있습니다.
ie7, 즉 8, 즉 9에서 작동합니다.
동작은 현재 파이어폭스 및 크롬 동작을 모방합니다. 여기서 "자리 표시자" 텍스트는 초점에 계속 표시되고 필드에 어떤 것을 입력한 후에만 사라집니다.
저는 기존 심들이 초점을 맞추는 자리 표시자를 숨기는 것에 좌절한 후 저만의 jQuery 플러그인을 만들었습니다. 이것은 열등한 사용자 경험을 만들고 파이어폭스, 크롬 및 사파리가 이를 처리하는 방식과도 일치하지 않습니다.텍스트가 입력될 때까지 자리 표시자를 표시하면서 페이지 또는 팝업이 처음 로드될 때 입력을 포커스하려면 이 경우에 해당됩니다.
https://github.com/nspady/jquery-placeholder-labels/
언급URL : https://stackoverflow.com/questions/5522164/input-placeholders-for-internet-explorer
'programing' 카테고리의 다른 글
| 유닉스와 윈도우 모두에서 작동하는 C의 64비트 정수(uint64_t)에 해당하는 아토이는? (0) | 2023.09.20 |
|---|---|
| Spring Data JPA: 규격 쿼리 가져오기 조인 만들기 (0) | 2023.09.20 |
| PowerShell: "mkdir" 명령에 대한 파일이 이미 존재하는 경우 오류를 억제하려면 어떻게 해야 합니까? (0) | 2023.09.20 |
| HRESULT의 예외: 시스템의 경우 0x8002000B(DISP_E_BADINEX).런타임.인터롭 서비스.COME 예외 (0) | 2023.09.15 |
| Shift-JIS 및 CP932로 SQL 주입 공격을 만드는 방법은 무엇입니까? (0) | 2023.09.15 |