jquery實(shí)現(xiàn)輸入框動(dòng)態(tài)增減的實(shí)例代碼
更新時(shí)間:2013年07月14日 15:15:55 作者:
主要功能是動(dòng)態(tài)增減輸入框,而且支持對(duì)各個(gè)輸入框的檢測,每個(gè)輸入框在輸入內(nèi)容后,對(duì)其進(jìn)行錯(cuò)誤提示
通過字符串拼接,將所有的輸入框中的內(nèi)容,用“1234235#34634234#123525”這樣的格式拼接。
網(wǎng)頁端代碼:
<form>
<table>
<tr><th>手機(jī):</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='再添加一個(gè)' ></input>
</td>
</tr>
</table>
</form>
js代碼:
$(function() {
//初始化
initFields();
});
function initFields(){
//初始化手機(jī)
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是目標(biāo)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);
}
/**
克隆一個(gè)input,顯示在指定的容器內(nèi)
*/
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)){//不匹配,進(jìn)行處理
span.text('手機(jī)號(hào)碼填寫錯(cuò)誤!').css("color","red");
$(obj).addClass("inputError");
return false;
}else {
span.text('');
$(obj).removeClass("inputError");
}
}
把js文件引入html文件
1
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
2
<script type="text/javascript" src="js/index.js"></script>
網(wǎng)頁端代碼:
復(fù)制代碼 代碼如下:
<form>
<table>
<tr><th>手機(jī):</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='再添加一個(gè)' ></input>
</td>
</tr>
</table>
</form>
js代碼:
復(fù)制代碼 代碼如下:
$(function() {
//初始化
initFields();
});
function initFields(){
//初始化手機(jī)
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是目標(biāo)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);
}
/**
克隆一個(gè)input,顯示在指定的容器內(nèi)
*/
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)){//不匹配,進(jìn)行處理
span.text('手機(jī)號(hào)碼填寫錯(cuò)誤!').css("color","red");
$(obj).addClass("inputError");
return false;
}else {
span.text('');
$(obj).removeClass("inputError");
}
}
把js文件引入html文件
1
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
2
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="js/index.js"></script>
您可能感興趣的文章:
- AngularJs根據(jù)訪問的頁面動(dòng)態(tài)加載Controller的解決方案
- AngularJs動(dòng)態(tài)加載模塊和依賴注入詳解
- js動(dòng)態(tài)修改input輸入框的type屬性(實(shí)現(xiàn)方法解析)
- js簡單實(shí)現(xiàn)表單中點(diǎn)擊按鈕動(dòng)態(tài)增加輸入框數(shù)量的方法
- JSP中使用JavaScript動(dòng)態(tài)插入刪除輸入框?qū)崿F(xiàn)代碼
- JavaScript動(dòng)態(tài)提示輸入框輸入字?jǐn)?shù)的方法
- Jquery動(dòng)態(tài)添加輸入框的方法
- Android實(shí)現(xiàn)動(dòng)態(tài)顯示或隱藏密碼輸入框的內(nèi)容
- jquery實(shí)現(xiàn)隱藏與顯示動(dòng)畫效果/輸入框字符動(dòng)態(tài)遞減/導(dǎo)航按鈕切換
- 利用Angularjs和原生JS分別實(shí)現(xiàn)動(dòng)態(tài)效果的輸入框
相關(guān)文章
jquery實(shí)現(xiàn)圖片左右間隔滾動(dòng)特效(可自動(dòng)播放)
圖片左右間隔滾動(dòng)Jquery特效,點(diǎn)擊滾動(dòng),不點(diǎn)擊自動(dòng)滾動(dòng),具體處理程序如下,感興趣的朋友可以參考下哈,希望可以幫助到你2013-05-05jQuery對(duì)html元素的取值與賦值實(shí)例詳解
這篇文章主要介紹了jQuery對(duì)html元素的取值與賦值,較為詳細(xì)的分析了jQuery針對(duì)常見html元素的獲取與賦值技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-12-12jquery導(dǎo)航制件jquery鼠標(biāo)經(jīng)過變色效果示例
這篇文章主要介紹了jquery鼠標(biāo)經(jīng)過變色效果代碼,大家參考使用吧2013-12-12Jquery 數(shù)據(jù)選擇插件Pickerbox使用介紹
目前市面上很少見或幾乎沒有這數(shù)據(jù)(對(duì)象)選擇插件.比如,點(diǎn)擊input , select 元素時(shí)彈出div(窗口),載入數(shù)據(jù)讓用戶選擇數(shù)據(jù),選擇后在填充回對(duì)應(yīng)的元素.2012-08-08詳解頁面滾動(dòng)值scrollTop在FireFox與Chrome瀏覽器間的兼容問題
這篇文章主要介紹了詳解頁面滾動(dòng)值scrollTop在FireFox與Chrome瀏覽器間的兼容問題 的相關(guān)資料,需要的朋友可以參考下2015-12-12