如何在span中添加内容onChange值的输入框

时间:2012-02-05 01:36:54

标签: jquery prepend

我有一个输入框

我有一个包含一些文字的span标记: 等待用户操作..

我想要做的是,当输入框的值发生变化时,我希望它在新行中添加(前置)span标记中的值。

所以,如果我继续添加让我们说:1,2,3,4,5,6,7,某事或

然后跨度

or
something
7
6
5
4
3
2
1
Waiting for user action..

有人请帮忙吗?

由于 Praney

3 个答案:

答案 0 :(得分:2)

我不是专家,但这可能会有所帮助。

<input type="text" id="myBox">
<span id="mySpan">Waiting for user action</span>

还有一些jQuery来更新SPAN。

$("#myBox").keyup(function() {
    var myBoxContents = $("#myBox").val();
    var mySpanContents = $("#mySpan").text();
    $("#mySpan").html(myBoxContents+"<br>"+mySpanContents);
});

答案 1 :(得分:1)

这样的东西
$('#textbox_id').keyup(function(e){
    $('#span_id').prepend(String.fromCharCode(e.keyCode) + '<br>');
});

应该做的伎俩

答案 2 :(得分:0)

更新了代码以显示更新问题中所需的输出

我会将跨度放在文本前面,只需使用用户输入的内容更新该范围

HTML:

<input type="text" id="text_input"><br>
<span id="userInput"></span>Waiting for user action

jquery的:

$("#text_input").keyup(function() {
    var data = $("#text_input").val();
    var myarray = data.split(",");
    var output = $("<span />");
    for (var i = 0; i < myarray.length; i++) {
        console.log(i);
        myarray[i] != "" ? output.prepend(myarray[i] + "<br>") : "" ;   
    }
    $("#userInput").html(output.html());
});

工作示例http://jsfiddle.net/64FVx/6/