jquery實現輸入框動態增減

 

主要功能是動態增減輸入框，而且支援對各個輸入框的檢測。

每個輸入框在輸入內容後，對其進行錯誤提示

最後通過字串拼接，將所有的輸入框中的內容，用“1234235#34634234#123525”這樣的格式拼接。

 

網頁端代碼：

 

01

<form>

02

<table>

03

<tr><th>手機：</th>

04

    <td style="padding:10px 0;">

05

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

06

    <div id="mobile_s_div">

07

    <input type="text" id="mobile_t" name="mobile_t" value="%{#session.user.mobile}" onchange="checkMobilephone(this)" onkeyup="checkMobilephone(this)"/>

08

    <span></span>

09

    </div>

10

    <div id="mobile_div"></div>

11

    <input type="submit" onclick="return addinput('mobile_s_div', 'mobile_div', '')" value='再添加一個' ></input>

12

    </td>

13

</tr>

14

</table>

15

</form>

js代碼：

 

01

$(function() {

02

    //初始化

03

    initFields();

04

});

05

 

06

 

07

function initFields(){

08

    //初始化手機

09

    var text = $('#mobile').val();

10

    var ss=text.split("#");

11

    if(ss.length>0){

12

        $('#mobile_t').val(ss[0]);

13

    }

14

    for(var i=1;i<ss.length;i++){

15

       addinput('mobile_s_div', 'mobile_div',ss[i]);

16

    }

17

    

18

    

19

}

20

/**

21

字串拼接

22

src_id 是源input的name，dist_id是目標input的id值

23

*/

24

function compose(src_name, dist_id){

25

    var str="";

26

    var ss = $('input[name='+src_name+']').each(function(i){

27

        if($(this).val() != "")

28

            str+='#'+$(this).val();

29

    });

30

    str=str.substring(1,str.length);

31

    $('#'+dist_id).val(str);

32

}

33

 

34

/**

35

複製一個input，顯示在指定的容器內

36

*/

37

function addinput(id, div_id, text){

38

    var mobile_div=$('#'+id).clone();

39

    mobile_div.children('input').val(text);

40

    var delbt=$("<input type='button' value='刪除'></input>")

41

    delbt.bind("click", function(){$(this).parent().remove()});

42

    mobile_div.append(delbt)

43

    $('#'+div_id).append(mobile_div);

44

    return false;

45

}

46

 

47

function check1(){

48

    compose('mobile_t', 'mobile');

49

}

50

 

51

//<input type="text" onkeyup="checkMobilephone(this)"/><span/>

52

function checkMobilephone(obj){

53

    

54

    if(obj == null){

55

        return false;

56

    }

57

    

58

    var span = $(obj).parent().children('span');

59

    

60

    var str = obj.value;

61

    if(str==""){

62

        span.text('');

63

        $(obj).removeClass("inputError");

64

        return false;

65

    }

66

    

67

    var pattern =  /^1\d{10}$/;

68

    

69

    if (!pattern.exec(obj.value)){//不匹配,進行處理

70

        span.text('手機號碼填寫錯誤!').css("color","red");

71

        $(obj).addClass("inputError");

72

        return false;

73

    }else {

74

        span.text('');

75

        $(obj).removeClass("inputError");

76

    }

77

}

把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>

摘自：TaoJinhuo的部落格