jquery code working in IE but not Firefox/Chrome.
i'm doing a jquery plugin of my own. have a look at this code :
<!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;">Requi开发者_JS百科red</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>
my plugin accept parameter such as "min" "max" and "step" in input fileds like html5 , but my problem is that my plugin is working fine in Internet Explorer but not in Firefox/Chrome. This code getting values of variables like "min" and "max" in IE but not in chrome thus i'm not able to define a minimum and maximum value of a type="number" input fields like html5 do. please help.
Just a shot in the dark - I believe that the use of e.target can be browser-specific, you may want to try using e.srcElement instead.
加载中,请稍侯......
精彩评论