[英]How to make the text that are typed inside the input to appear into a seperate div
我有一个输入字段和一个单独的段落。 现在如何将输入中键入的文本也显示在paragrah中?
<input type="text" />
<p>facebook/<span>your.username</span> </p>
input{
width: 300px;
height: 30px;
}
span {
font-weight: bold;
}
使用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/
尝试这个:
$(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
});
});
这样,您可以实时更改p标签。
$('#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>
这是一个纯JavaScript解决方案,使用input
事件将在您键入时更新另一个元素的内容,还包括检查input
元素是否为空。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.