<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>add input demo</title>
</head>
<body>
<form name='augmentform' action='#' method='post'>
<div id='input_wrap'>
<p>
<label>
提交信息：
</label>
<input name='augmentinput'>
</p>
</div>
<p>
<input type='submit' value='提交'><input id='addinput' value='增加一个提交文本框' type='button'><input id='removeinput' value='删除一个' type='button'>
</p>
<p id='inputmessage'>
</p>
</form>
<script type='text/javascript'>
(function(w, undefined){
var tool = function(){
return {
$: function(id){
return document.getElementById(id);
},
bind: function(obj, type, fn){
if (obj.attachEvent) {
obj['e' + type + fn] = fn;
obj[type + fn] = function(){
obj['e' + type + fn](w.event);
}
obj.attachEvent('on' + type, obj[type + fn]);
}
else {
obj.addEventListener(type, fn, false);
}
}
};
}(), addput = tool.$('addinput'), inputwrap = tool.$('input_wrap'), message = tool.$('inputmessage'), removeput = tool.$('removeinput'), maxsize = 5, z = function(){
return inputwrap.getElementsByTagName('p')
}();
handleinput = {
add: function(){
if (z.length >= maxsize) {
message.innerHTML = '最多增加' + maxsize + '条新信息';
return false;
}
message.innerHTML = '';
var newinput = '<p><label>提交内容：</label><input name="augmentinput"></p>';
inputwrap.innerHTML += newinput;
},
remove: function(){
if (z.length == 1) {
message.innerHTML = '不能再删除了';
return false;
}
message.innerHTML = '';
inputwrap.removeChild(z[z.length - 1]);
}
};
tool.bind(addput, 'click', handleinput.add);
tool.bind(removeput, 'click', handleinput.remove);
})(window);
</script>
</body>
</html>
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
