ホームページ  >  記事  >  ウェブフロントエンド  >  入力の動的増減を実現するjqueryのサンプルコード box_jquery

入力の動的増減を実現するjqueryのサンプルコード box_jquery

WBOY
WBOYオリジナル
2016-05-16 17:28:45993ブラウズ

文字列の結合により、すべての入力ボックスの内容が「1234235#34634234#123525」の形式で結合されます。
Web ページ コード:

コードをコピー コードは次のとおりです。

<フォーム>
<テーブル>
携帯電話:

< input type=" hidden" name="user.mobile" value="124213#243463" id="mobile"/>


mobile_div', '')" value='もう 1 つ追加' >


< /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 addinput('mobile_s_div', ' mobile_div',ss[i]);
}
}
/**
文字列連結
src_id はソース入力の名前、dist_id はターゲット入力の 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);
}
/**
入力をクローンして、指定したコンテナーに表示します
*/
function addinput(id, div_id, text){
var mobile_div=$('#' id).clone();
mobile_div.children ('input').val(text) ;
var delbt=$("")
delbt.bind(" click", function(){$(this ).parent().remove()});
mobile_div.append(delbt)
$('#' div_id).append(mobile_div);
return false;
}
function check1(){
compose('mobile_t', 'mobile');
}
//
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 = /^1d{10}$/;
if (!pattern.exec(obj. value)){//一致しないため、処理を続行します
span.text('携帯電話番号が間違っています!').css("color","re​​d");
$(obj).addClass( "inputError");
return false;
}else {
scan.text('');
$(obj).removeClass("inputError");
}
}


Put js ファイルは HTML ファイルをインポートします
1




2
コードをコピー コードは次のとおりです:


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。