집 > 기사 > 웹 프론트엔드 > 입력 box_jquery의 동적 증가 및 감소를 구현하는 jquery의 예제 코드

입력 box_jquery의 동적 증가 및 감소를 구현하는 jquery의 예제 코드

WBOY원래의: 2016-05-16 17:28:45994검색

스트링 스플라이싱을 통해 모든 입력 상자의 내용이 "1234235#34634234#123525" 형식으로 스플라이싱됩니다.
웹페이지 코드:

코드 복사 코드는 다음과 같습니다.

< form>

< /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;
}
varspan = $ (obj).parent().children( 'span');
var str = obj.value;
if(str==""){
span.text('');
$(obj).removeClass("inputError ");
return false;
}
var 패턴 = /^1d{10}$/;
if (!pattern.exec(obj. value)){//일치하지 않으면 처리 span.text (전화번호가 잘못되었습니다!') Css ("color", "red")
$ (obj) .addclass (" inputerror");
false 반환;
}else {
span.text('');
$(obj).removeClass("inputError");
}
}

Put js 파일은 html 파일을 가져옵니다.
1

코드 복사

코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

성명：

이전 기사：JavaScript 맵 드래그 기능 SpryMap_javascript 기술의 간단한 구현다음 기사：JavaScript 맵 드래그 기능 SpryMap_javascript 기술의 간단한 구현

입력 box_jquery의 동적 증가 및 감소를 구현하는 jquery의 예제 코드

관련 기사