작은 문제 placeholder
가 있습니다 .IE 8-9에서 입력 상자 의 속성이 지원되지 않습니다.
내 프로젝트 (ASP Net)에서이를 지원하는 가장 좋은 방법은 무엇입니까? jQuery를 사용하고 있습니다. 다른 외부 도구를 사용해야합니까?
가 http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html는 좋은 솔루션?
작은 문제 placeholder
가 있습니다 .IE 8-9에서 입력 상자 의 속성이 지원되지 않습니다.
내 프로젝트 (ASP Net)에서이를 지원하는 가장 좋은 방법은 무엇입니까? jQuery를 사용하고 있습니다. 다른 외부 도구를 사용해야합니까?
가 http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html는 좋은 솔루션?
답변:
이 jQuery 플러그인을 사용할 수 있습니다 : https://github.com/mathiasbynens/jquery-placeholder
그러나 귀하의 링크도 좋은 해결책 인 것 같습니다.
다음 폴리 필 중 하나를 사용할 수 있습니다.
이 스크립트는 placeholder
속성을 지원하지 않는 브라우저 에서 속성에 대한 지원을 추가 하며 jQuery가 필요하지 않습니다!
$ .Browser.msie은 당신이 사용하는이 ... 더 이상 최신 JQuery와에없는 $의 .support을
아래처럼 :
<script>
(function ($) {
$.support.placeholder = ('placeholder' in document.createElement('input'));
})(jQuery);
//fix for IE7 and IE8
$(function () {
if (!$.support.placeholder) {
$("[placeholder]").focus(function () {
if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
}).blur(function () {
if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
}).blur();
$("[placeholder]").parents("form").submit(function () {
$(this).find('[placeholder]').each(function() {
if ($(this).val() == $(this).attr("placeholder")) {
$(this).val("");
}
});
});
}
});
</script>
jquery를 사용하면 다음과 같이 할 수 있습니다. 이 사이트 에서 Jquery를 사용하는 자리 표시 자
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
이들은 대체 링크입니다
submit
이벤트에 대해 동일한 "양식"을 반복해서 묶는 이유는 무엇입니까? 제출 이벤트는 무엇과 관련이 있습니다
내가 시도한 여러 플러그인과 호환성 문제가 있었는데 이것은 텍스트 입력에서 자리 표시자를 지원하는 가장 간단한 방법 인 것 같습니다.
function placeholders(){
//On Focus
$(":text").focus(function(){
//Check to see if the user has modified the input, if not then remove the placeholder text
if($(this).val() == $(this).attr("placeholder")){
$(this).val("");
}
});
//On Blur
$(":text").blur(function(){
//Check to see if the use has modified the input, if not then populate the placeholder back into the input
if( $(this).val() == ""){
$(this).val($(this).attr("placeholder"));
}
});
}
$(function(){
if($.browser.msie && $.browser.version <= 9){
$("[placeholder]").focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
}).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
}).blur();
$("[placeholder]").parents("form").submit(function() {
$(this).find('[placeholder]').each(function() {
if ($(this).val() == $(this).attr("placeholder")) {
$(this).val("");
}
})
});
}
});
이 시도
나는 이것을 사용합니다 .Javascript 일뿐입니다.
단순히 값이있는 입력 요소가 있으며 사용자가 입력 요소를 클릭하면 값이없는 입력 요소로 변경됩니다.
CSS를 사용하여 텍스트의 색상을 쉽게 변경할 수 있습니다. 자리 표시 자의 색상은 id #IEinput의 색상이며 입력 한 텍스트의 색상은 id #email의 색상입니다. 하지 마십시오 자리 표시자를 지원하지 않는 IE의 버전, getElementsByClassName 중 하나를 지원하지 않기 때문에, getElementsByClassName을 사용!
원래 비밀번호 입력 유형을 텍스트로 설정하여 비밀번호 입력에 플레이스 홀더를 사용할 수 있습니다.
땜장이 : http://tinker.io/4f7c5/1-JSfiddle 서버가 다운되었습니다!
*내 하찮은 영어 실력에 죄송하다는 말씀을 드리고 싶습니다
자바 스크립트
function removeValue() {
document.getElementById('mailcontainer')
.innerHTML = "<input id=\"email\" type=\"text\" name=\"mail\">";
document.getElementById('email').focus(); }
HTML
<span id="mailcontainer">
<input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail">
</span>
여기에 상륙하는 다른 사람들을 위해. 이것이 나를 위해 일한 것입니다.
//jquery polyfill for showing place holders in IE9
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
script.js 파일에 이것을 추가하십시오. 씨의 http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
대부분의 솔루션이 jQuery를 사용하거나 원하는대로 만족스럽지 않기 때문에 mootools에 대한 스 니펫을 작성했습니다.
function fix_placeholder(container){
if(container == null) container = document.body;
if(!('placeholder' in document.createElement('input'))){
var inputs = container.getElements('input');
Array.each(inputs, function(input){
var type = input.get('type');
if(type == 'text' || type == 'password'){
var placeholder = input.get('placeholder');
input.set('value', placeholder);
input.addClass('__placeholder');
if(!input.hasEvent('focus', placeholder_focus)){
input.addEvent('focus', placeholder_focus);
}
if(!input.hasEvent('blur', placeholder_blur)){
input.addEvent('blur', placeholder_blur);
}
}
});
}
}
function placeholder_focus(){
var input = $(this);
if(input.get('class').contains('__placeholder') || input.get('value') == ''){
input.removeClass('__placeholder');
input.set('value', '');
}
}
function placeholder_blur(){
var input = $(this);
if(input.get('value') == ''){
input.addClass('__placeholder');
input.set('value', input.get('placeholder'));
}
}
나는 그것이 다른 사람들보다 조금 더 보인다고 고백하지만 잘 작동합니다. __placeholder 는 자리 표시 자 텍스트의 색상을 멋지게 만드는 ccs 클래스입니다.
window.addEvent ( 'domready', ... 및 팝업과 같은 추가 코드에 fix_placeholder 를 사용했습니다 .
네가 좋아하길 바래.
친절합니다.
이 링크의 코드를 사용했습니다 http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html
그러나 브라우저 감지에서 나는 다음을 사용했습니다.
if (navigator.userAgent.indexOf('MSIE') > -1) {
//Your placeholder support code here...
}
<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />
아래 코드를 추가하면 완료됩니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
<script type="text/javascript">
// Mock client code for testing purpose
$(function(){
// Client should be able to add another change event to the textfield
$("input[name='input1']").blur(function(){ alert("Custom event triggered."); });
// Client should be able to set the field's styles, without affecting place holder
$("textarea[name='input4']").css("color", "red");
// Initialize placeholder
$.Placeholder.init();
// or try initialize with parameter
//$.Placeholder.init({ color : 'rgb(255, 255, 0)' });
// call this before form submit if you are submitting by JS
//$.Placeholder.cleanBeforeSubmit();
});
</script>
https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip 에서 전체 코드 및 데모를 다운로드 하십시오.
다음은 IE 8 이하의 자리 표시자를 만드는 자바 스크립트 함수이며 암호에서도 작동합니다.
/* 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>
<script>
if ($.browser.msie) {
$('input[placeholder]').each(function() {
var input = $(this);
$(input).val(input.attr('placeholder'));
$(input).focus(function() {
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
$(input).blur(function() {
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.val(input.attr('placeholder'));
}
});
});
}
;
</script>
<input>
. 속성은 괄호 안의 키-값 쌍입니다 (예 :)placeholder="This is an attribute value"
. 같은 질문을하는 미래의 사람들이 찾을 수 있도록 질문을 그대로 둡니다.