나는 내 자신의 jquery 플러그인을하고있다. 이 코드를 살펴 있습니다IE에서 jquery 코드가 작동하지만 Firefox/Chrome에서는 작동하지 않습니다.
<!DOCTYPE html>
<html>
<head>
`<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>`
<script type="text/javascript">
// My plugin
(function($) {
$.html5 = {
form: function() {
select = $('input');
$("input#number").after('<input type="button" id="step-up" value="U"><input type="button" id="step-down" value="D">');
$('input').bind('click', function(e){
if($(e.target).is("#step-up")){
$.html5.selector('min');
steps = parseInt(selector.attr('step'));
min = parseInt(selector.attr('min'));
max = parseInt(selector.attr('max'));
val = parseInt(selector.attr('value'));
if (val < max){
selector.val(val + steps);
}
}
if($(e.target).is("#step-down")){
$.html5.selector('min');
steps = parseInt(selector.attr('step'));
min = parseInt(selector.attr('min'));
max = parseInt(selector.attr('max'));
val = parseInt(selector.attr('value'));
if (val > min){
selector.val(val - steps);
}
}
});
increment = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$.each(increment, function(index){
selector = $('input[placeholder]:eq(' + index + ')');
placeholder = selector.attr('placeholder');
selector.val(placeholder);
});
$(select).bind('focus', function(){
index = $(select).index(this);
// Placeholder
selector = $('input[placeholder]:eq(' + index + ')');
placeholder = selector.attr('placeholder');
if (selector.val() == placeholder)
{
selector.val('');
}
// Required
$('*').remove('.error');
//Min Max
});
$(select).bind('blur', function(){
index = $(select).index(this);
// Placeholder
selector = $('input[placeholder]:eq(' + index + ')');
placeholder = selector.attr('placeholder');
if (placeholder != selector.val() && selector.val() == '')
{
$(selector).val(placeholder);
}
// Required
$.html5.selector('required');
required = selector.attr('required');
if(required == 'required' && selector.val() == placeholder)
{
$(this + ':submit').attr('disabled','disabled');
$(this).after('<div class="error" style="border: 1px solid;">Required</div>');
}
else
{
$(this + ':submit').removeAttr('disabled');
$('*').remove('.error');
}
// Min Max
$.html5.selector('min');
min = selector.attr('min');
max = selector.attr('max');
val = parseInt(selector.val());
if(val > max) {
selector.val(max);
}
else if(val < min) {
selector.val(min);
}
});
},
selector: function(attr){
select = $('input');
attrib = $('input[' + attr + ']');
index = $(attrib).index(select);
selector = $('input[' + attr + ']:eq(' + index + ')');
return selector;
}
},
form = function() {
$.html5.form();
}
})(jQuery);
// Call to my plugin
$(document).ready(function() {
form();
});
`</script>`
`</head>`
`<body>`
`<form id="form" method="post" action="http://localhost/html5/">`
`<input type="text" name="item" value="" placeholder="Enter text here." required="required" />`
`<input type="number" name="number" min="5" max="10" step="1" value="" placeholder="Number here" id="number" />`
`<input type="submit" value="Submit">`
</form>
</body>
</html>
내 플러그인은 "분", "최대"와 "HTML5와 같은 입력 fileds 단계"로 매개 변수를 동의를하지만 내 문제는 내 플러그인 Internet Explorer에서 잘 작동한다는 것입니다 Firefox/Chrome에서는 그렇지 않습니다. IE에서 "min"및 "max"와 같은 변수 값을 가져 오는 코드이지만 hrome5와 같은 입력 필드의 최소 및 최대 값을 정의 할 수는 없습니다. 도와주세요.
문제의 세부 사항을 알려주십시오. –
... 지구의 오염 ... 하나의'var'이 아닙니다 .. https://developer.mozilla.org/en/JavaScript/Reference/Statements/var –
@ gaby .. 선택적인 필요가 있습니다. 변수 앞에 단어 "var"를 넣으십시오. 실제로는 필요 없다. –