實時訪問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元素中的顯示

回答

相關問題