如何将文本插入输入字段

时间:2012-02-10 01:17:10

标签: jquery

我想在输入字段的文本末尾插入文本?我该怎么做呢?

这是我到目前为止的代码

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="src/jquery.tokeninput.js"></script>

        <link rel="stylesheet" href="styles/token-input.css" type="text/css" />
        <link rel="stylesheet" href="styles/token-input-facebook.css" type="text/css" />

        <script type="text/javascript">
            $(document).ready(function () {
                $("input[type=button]").click(function () {
                    alert("Would submit: " + $(this).siblings("input[type=text]").val());
                });
            });

$.fn.setCursorPosition = function(position){
    if(this.lengh == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    if(this.lengh == 0) return this;
    input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    this.setCursorPosition(this.val().length);
}





    $(document).ready(function() {
    $('.num-block').hide();
    $('.addnum').click(function() {
      $('.num-block').slideToggle("slow");


    });
    });


    $(document).ready(function() { 
 $('#button1').click(function() {
         //$('#some-text').focus();

$("#some-text").focusEnd();
       });


      });

 </script>

    <style type="text/css">
     .num-block { bordeR:1px solid #000; width:700px;margin-top:40px;}
    </style>
</head>

<body>


                    <div class="block-1"> 
                     <!-- dependents information -->     
                     <input id="some-text"  type="text" value=" some text goes here" />                    
                                <a href="#"  class='addnum adddel'><span>Add Number</span></a>



                               <div class="num-block">

                                <!--  phone -->
                                 <div>
                                  Enter Phone:<input type="text" id="demo-input-local" name="blah" /><input type="button" #id="button1" value="Submit" />
                                    <script type="text/javascript">
                                        $(document).ready(function () {
                                            $("#demo-input-local").tokenInput([
                                          /*  { id: 7, name: "john.doe@uhc.com", "value": "@" , "prefix": "Email1"},
                                            { id: 11, name: "j.doe@uhc.com", "value": "@" ,"prefix": "Email2"},
                                            { id: 13, name: "nancy.doe@uhc.com", "value": "@" ,"prefix": "Email3"},
                                            { id: 17, name: "liz.d@uhc.com", "value": "@", "prefix": "Email4" },
                                            { id: 19, name: "joe.doe@uhc.com", "value": "@", "prefix": "Email5" },
                                            { id: 23, name: "www.C#.com", "value": "http", "prefix": "Website1" },
                                            { id: 29, name: "www.C.com", "value": "http", "prefix": "Website2" },
                                            { id: 31, name: "www.Fortran.com", "value": "http", "prefix": "Website3" },
                                            { id: 37, name: "www.VisualBasic.com", "value": "http", "prefix": "Website4" },
                                            { id: 41, name: "www.DoC.com", "value": "http", "prefix": "Website5" },
                                            { id: 43, name: "www.C++.com", "value": "http" , "prefix": "Website6"},
                                            { id: 47, name: "www.Java.com", "value": "http" , "prefix": "Website7"},  */
                                            { id: 37, name: "111-111-1111", "value": "#", "prefix": "Phone1" },
                                            { id: 41, name: "222-222-2222", "value": "#", "prefix": "Phone2" },
                                            { id: 43, name: "333-333-3333", "value": "#" , "prefix": "Phone3"},
                                            { id: 47, name: "555-555-5555", "value": "#" , "prefix": "Phone4"}


                                         ], {
                                             theme: "facebook",
                                             propertyToSearch: "value",
                                             hintText: "Type '@' for email or 'http' for website  or '#' for phone",
                                             tokenFormatter: function (item) { return "<li><p>" +  item.prefix + "</p></li>" },
                                             resultsFormatter: function (item) { return "<li>" + item.prefix +" "+ item.name + "</li>" }
                                         });
                                        });
                                    </script>
                                </div>


                                <!--- End Phone --> 


                                </div>


                                </div>

                    </div>

1 个答案:

答案 0 :(得分:4)

将值设置为当前值,加上您想要的任何值:

$('#input_selector').val( $('#input_selector').val() + 'My new text' )