Question

我有两个输入，一个应该包含firstname，另一个应该包含新用户的lastname。现在我想在a中实时显示用户名（firstname.lastname）。但是当我编辑第二个输入时，整个文本就会发生变化。

这是我的代码：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 );
});

Answer 1

执行此操作时：

.text( this.value )

您使用当前输入值替换 span中的内容。而是将其替换为整个计算值。您只需要一个keyup处理程序：

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

Answer 2

jsFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这是我解决问题的方法：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);

Answer 4

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

Answer 5

样式注意：这会使您的代码更专业，并通过将用户放大到他们甚至无法看到他们在表单字段中输入的内容来阻止移动用户发送垃圾邮件而自动完成，另外请记住要记下以前的帖子，以便形成你想要的东西。

确保将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>

Answer 6

只需使用变量。

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

Answer 7

试试这个，这就是你想要的想法

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

Answer 8

试试这个，我只是改变了你的代码

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

实时访问html输入html-element中的显示

8 个答案: