如何使输入中键入的文本显示在单独的div中

Question

I've a input field and a separate paragraph. Now how do I get the text that are typed inside the input to also to appear inside the paragrah.?

HTML CODE

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

CSS

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

Answer 1

Use the keyup event:

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

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

See working jsfiddle: http://jsfiddle.net/VDesign/yqt8tx3b/2/

Answer 2

Try this:

$(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
    });
});

Demo: https://jsfiddle.net/tusharj/4yfswj3p/

Answer 3

This way you can make live changes in p tag.

 $('#txt').on('input',function(e){ $('p').html($(this).val()); }); 

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

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

Answer 4

Here's a pure JavaScript solution, using the input event that will update the contents of another element as you type and also includes a check on whether or not the input element is empty.

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

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