通过字符串拼接,将所有的输入框中的内容,用“1234235#34634234#123525”这样的格式拼接。
网页端代码:
复制代码 代码如下:
<form>
<table>
<tr><th>手机:</th>
<td style="padding:10px 0;">
<input type="hidden" name="user.mobile" value="124213#243463" id="mobile"/>
<div id="mobile_s_div">
<input type="text" id="mobile_t" name="mobile_t" value="%{#session.user.mobile}" onchange="checkMobilephone(this)" onkeyup="checkMobilephone(this)"/>
<span></span>
</div>
<div id="mobile_div"></div>
<input type="submit" onclick="return addinput('mobile_s_div', 'mobile_div', '')" value='再添加一个' ></input>
</td>
</tr>
</table>
</form>
js代码:
复制代码 代码如下:
$(function() {
//初始化
initFields();
});
function initFields(){
//初始化手机
var text = $('#mobile').val();
var ss=text.split("#");
if(ss.length>0){
$('#mobile_t').val(ss[0]);
}
for(var i=1;i<ss.length;i++){
addinput('mobile_s_div', 'mobile_div',ss[i]);
}
}
/**
字符串拼接
src_id 是源input的name,dist_id是目标input的id值
*/
function compose(src_name, dist_id){
var str="";
var ss = $('input[name='+src_name+']').each(function(i){
if($(this).val() != "")
str+='#'+$(this).val();
});
str=str.substring(1,str.length);
$('#'+dist_id).val(str);
}
/**
克隆一个input,显示在指定的容器内
*/
function addinput(id, div_id, text){
var mobile_div=$('#'+id).clone();
mobile_div.children('input').val(text);
var delbt=$("<input type='button' value='删除'></input>")
delbt.bind("click", function(){$(this).parent().remove()});
mobile_div.append(delbt)
$('#'+div_id).append(mobile_div);
return false;
}
function check1(){
compose('mobile_t', 'mobile');
}
//<input type="text" onkeyup="checkMobilephone(this)"/><span/>
function checkMobilephone(obj){
if(obj == null){
return false;
}
var span = $(obj).parent().children('span');
var str = obj.value;
if(str==""){
span.text('');
$(obj).removeClass("inputError");
return false;
}
var pattern = /^1\d{10}$/;
if (!pattern.exec(obj.value)){//不匹配,进行处理
span.text('手机号码填写错误!').css("color","red");
$(obj).addClass("inputError");
return false;
}else {
span.text('');
$(obj).removeClass("inputError");
}
}
把js文件引入html文件
1
复制代码 代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.6.4.min.js">
2
复制代码 代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/index.js">
网页端代码:
复制代码 代码如下:
<form>
<table>
<tr><th>手机:</th>
<td style="padding:10px 0;">
<input type="hidden" name="user.mobile" value="124213#243463" id="mobile"/>
<div id="mobile_s_div">
<input type="text" id="mobile_t" name="mobile_t" value="%{#session.user.mobile}" onchange="checkMobilephone(this)" onkeyup="checkMobilephone(this)"/>
<span></span>
</div>
<div id="mobile_div"></div>
<input type="submit" onclick="return addinput('mobile_s_div', 'mobile_div', '')" value='再添加一个' ></input>
</td>
</tr>
</table>
</form>
js代码:
复制代码 代码如下:
$(function() {
//初始化
initFields();
});
function initFields(){
//初始化手机
var text = $('#mobile').val();
var ss=text.split("#");
if(ss.length>0){
$('#mobile_t').val(ss[0]);
}
for(var i=1;i<ss.length;i++){
addinput('mobile_s_div', 'mobile_div',ss[i]);
}
}
/**
字符串拼接
src_id 是源input的name,dist_id是目标input的id值
*/
function compose(src_name, dist_id){
var str="";
var ss = $('input[name='+src_name+']').each(function(i){
if($(this).val() != "")
str+='#'+$(this).val();
});
str=str.substring(1,str.length);
$('#'+dist_id).val(str);
}
/**
克隆一个input,显示在指定的容器内
*/
function addinput(id, div_id, text){
var mobile_div=$('#'+id).clone();
mobile_div.children('input').val(text);
var delbt=$("<input type='button' value='删除'></input>")
delbt.bind("click", function(){$(this).parent().remove()});
mobile_div.append(delbt)
$('#'+div_id).append(mobile_div);
return false;
}
function check1(){
compose('mobile_t', 'mobile');
}
//<input type="text" onkeyup="checkMobilephone(this)"/><span/>
function checkMobilephone(obj){
if(obj == null){
return false;
}
var span = $(obj).parent().children('span');
var str = obj.value;
if(str==""){
span.text('');
$(obj).removeClass("inputError");
return false;
}
var pattern = /^1\d{10}$/;
if (!pattern.exec(obj.value)){//不匹配,进行处理
span.text('手机号码填写错误!').css("color","red");
$(obj).addClass("inputError");
return false;
}else {
span.text('');
$(obj).removeClass("inputError");
}
}
把js文件引入html文件
1
复制代码 代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.6.4.min.js">
2
复制代码 代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/index.js">
标签:
jquery,输入框,增减
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“jquery实现输入框动态增减的实例代码”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。