如何使输入内输入的文本显示为单独的div

Question

我有一个输入字段和一个单独的段落。现在，如何让输入中输入的文本也出现在paragrah中。？

HTML CODE

style/Theme.AppCompat.Light.DarkActionBar

CSS

<input type="text" />
<p>facebook/<span>your.username</span> </p>

Answer 1

使用keyup事件：

$(function() {
    $('input').on('keyup', function() {
        var username = $(this).val();

        if(username.length > 0) {
           $('p > span').html(username);
        } else{
           $('p > span').html('your.username');
        }
    });
});

参见jsfiddle：http://jsfiddle.net/VDesign/yqt8tx3b/2/

Answer 2

试试这个：

$(document).ready(function() {
    // When DOM is ready to be manipulated

    $('input').on('keyup', function() {
        // On each key-up in textbox

        $('p span').text($.trim($(this).val()) || 'your.username');
        // Set the value of textbox inside the span
    });
});

演示：https://jsfiddle.net/tusharj/4yfswj3p/

Answer 3

这样您就可以在p标签中进行实时更改。

＆＃13;

＆＃13;

input{
width: 300px;
height: 30px;
}
span {
font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt"/>
<p>facebook/<span>your.username</span> </p>

＆＃13;

users => id

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是一个纯JavaScript解决方案，使用input事件，它会在您键入时更新另一个元素的内容，还包括检查input元素是否为空。

＆＃13;

＆＃13;

var input=document.getElementById("input"),output=document.getElementById("output");
input.addEventListener("input",function(){
    output.innerHTML="facebook.com/"+(this.value.trim()||"your.username");
},0);

＆＃13;

<input id="input" type="text">
<p id="output">facebook.com/your.username</p>

＆＃13;

＆＃13;

＆＃13;