实时访问html输入在html元素中的显示
问题描述:
我有两个输入,一个应该包含firstname,另一个应该包含新用户的姓。现在我想在a中实时显示用户名(firstname.lastname)。但是,当我编辑第二个输入,整个文本的变化。实时访问html输入在html元素中的显示
这里是我的代码:https://jsfiddle.net/qun74mwc/13/
HTML:
<span id="username"></span><br/><br/>
<input type="text" name="firstname" /><br/><br/>
<input type="text" name="lastname" />
的Jquery:
var $username = $("#username");
$("input[name='firstname']").keyup(function() {
$("#username").text(this.value + ".");
});
$("input[name='lastname']").keyup(function() {
$("#username").text(this.value);
});
答
当你这样做:
.text(this.value)
你取代span
中的内容与当前输入的值的值。取而代之的是整个计算值。对于那些只需要一个keyup
处理程序都:
$("input").keyup(function() {
var formattedName = $("input[name='firstname']").val() + "." + $("input[name='lastname']").val();
$("#username").text(formattedName);
});
答
只需使用变量。
var $username = $("#username");
var firstName = '';
var lastName = '';
$("input[name='firstname']").keyup(function() {
firstName = this.value;
renderUsernameSpan();
});
$("input[name='lastname']").keyup(function() {
lastName = this.value;
renderUsernameSpan();
});
function renderUsernameSpan(){
$("#username").text(firstName + '.' + lastName);
}
答
$("input[name='firstname'], input[name='lastname']").keyup(function() {
\t var $fnVal = $("input[name='firstname']").val(),
\t $lnVal = $("input[name='lastname']").val();
$("#username").text($fnVal + "." + $lnVal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="username"></span><br/><br/>
<input type="text" name="firstname" /><br/><br/>
<input type="text" name="lastname" />
答
这是我想解决它:https://jsfiddle.net/benhull/qun74mwc/23/
function updateText(){
$("#username").text($("input[name='firstname']").val() + "." + $("input[name='lastname']").val());
}
$("input[name='firstname']").keyup(updateText);
$("input[name='lastname']").keyup(updateText);
答
给IDS的输入字段(例如相同的名称),然后编辑你的js到:
var $username = $("#username");
$("input[name='firstname']").keyup(function() {
$("#username").text(this.value + "." + $('#lastname').val());
});
$("input[name='lastname']").keyup(function() {
$("#username").text($('#firstname').val() + "." + this.value);
});
答
试试这个,这是你想要什么,我认为
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
first name : <input type="text" id="firstname">
last name :<input type="text" id="lasttname">
<h3 class="display"></h3>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#firstname, #lasttname").on('keyup keydown',function(){
$(".display").text("");
var firstname = $("#firstname").val();
var lasttname = $("#lasttname").val();
var fullname = firstname+"."+ lasttname;
//alert(fullname);
$(".display").append(fullname);
});
});
</script>
</html>
答
试试这个,我只是改变了你编写一个律
var $username = $("#username");
var fn = ""
var ln = ""
$("input[name='firstname']").keyup(function() {
fn = this.value + "."
$("#username").text(fn + ln);
});
$("input[name='lastname']").keyup(function() {
ln = this.value;
$("#username").text( fn + ln);
});
答
风格注:这会让你的代码更有大量专业性,并通过在用户放大到如此地步,从垃圾邮件移动用户停止自动完成,他们甚至不能看到他们在表单字段中键入,另外请记住注意以前的帖子,以便形成你正在寻找的东西。
务必将HTML输入侧的风格是这样的:
<form autocomplete="off">
First Name:<br><input type="text" name="first_name"><br>
Last Name:<br><input type="text" name="last_name"><br>
</form>
OR
<form autocomplete="off">
First Name:<br><input type="text" name="firstname"><br>
Last Name:<br><input type="text" name="lastname"><br>
</form>
你也可以使用一个CDN加载的jQuery,而无需将资料直接下载,如:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
谢谢!你帮了我很多。 –
用于解释实际问题而不仅仅是解决方案的荣誉。 – benjaminhull