实时访问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); 
});

来源

2016-08-18 T K

当你这样做：

.text(this.value)

你取代span中的内容与当前输入的值的值。取而代之的是整个计算值。对于那些只需要一个keyup处理程序都：

$("input").keyup(function() { 
    var formattedName = $("input[name='firstname']").val() + "." + $("input[name='lastname']").val(); 
    $("#username").text(formattedName); 
});

来源

2016-08-18 15:38:53 David

谢谢！你帮了我很多。 –

用于解释实际问题而不仅仅是解决方案的荣誉。 – benjaminhull

只需使用变量。

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

来源

2016-08-18 15:40:16

jsFiddle

$("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" />

来源

2016-08-18 15:42:00

这是我想解决它：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);

来源

2016-08-18 15:42:22 benjaminhull

给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); 
});

看到https://jsfiddle.net/qun74mwc/25/

来源

2016-08-18 15:42:27

试试这个，这是你想要什么，我认为

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

来源

2016-08-18 15:44:19

试试这个，我只是改变了你编写一个律

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

Your code UPDATED

来源

2016-08-18 15:44:28

风格注：这会让你的代码更有大量专业性，并通过在用户放大到如此地步，从垃圾邮件移动用户停止自动完成，他们甚至不能看到他们在表单字段中键入，另外请记住注意以前的帖子，以便形成你正在寻找的东西。

务必将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>

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

来源

2016-08-18 16:23:53

实时访问html输入在html元素中的显示

回答

相关问题