如何显示来自文本字段的用户输入答案

【问题标题】：How to display user input from text field如何显示来自文本字段的用户输入
【发布时间】：2017-08-06 01:05:58
【问题描述】：

我有一个包含用户名、密码和验证密码输入的表单。用户输入他们的用户名和密码并单击登录，这将取消隐藏允许他们输入验证密码的 div。在隐藏的 div 中，它显示“你好，这个帐户正在使用验证密码”但是我想知道是否有办法让它说“你好 //输入的用户名//这个帐户正在使用验证”别针'。我将如何实现这一目标？

取消隐藏 div 的按钮

<input class="btn_green_white_innerfade btn_medium" type="button" 
name="submit" id="userLogin" value="Sign in" width="104" height="25" 
border="0" tabindex="5" onclick="showDiv()">

用户输入用户名的字段。

<label for="userAccountName">username</label><br>
<input class="textField" type="text" name="username" 
id="steamAccountName" maxlength="64" tabindex="1" value=""><br>&nbsp;<br>

显示在隐藏 div 中的消息

<div class="auth_modal_h1">Hello <span 
id="login_twofactorauth_message_entercode_accountname"></span>!</div>
<p>This account is currently using a verification pin.</p>
        </div>

任何帮助将不胜感激

【问题讨论】：

标签： javascript php jquery html css

【解决方案1】：

应该这样做：

var username = document.getElementById("steamAccountName").value
document.getElementById("login_twofactorauth_message_entercode_accountname").innerText = username

【讨论】：

您好，很抱歉这个愚蠢的问题，但我应该把这段代码放在哪里？
在与您取消隐藏验证引脚 div 的位置相同的功能块中。

【解决方案2】：

这基本上意味着您添加到 div 的所有内容都是使用 jQuery 完成的，而不是混合在一起，这可能会导致以后的混乱。

将id="username" 添加到您的输入中。
将id="modaldiv" 添加到你的hello div

删除该 div 中的所有内容。

var username = $("#username").val();
var divhtml = "Hello " + username + " <span 
  id='login_twofactorauth_message_entercode_accountname'></span>!
$("#modaldiv").html(divhtml);

【讨论】：

【解决方案3】：

以下代码肯定会让您入门。它允许您使用.value 获取用户在输入框中输入的值，并使用.innerHTML 将内容添加到另一个div。

var displayUsername = function() {

  var username = document.getElementById('username').value
  
  if(username != '') {
  
    document.getElementById('message').innerHTML = 'Hello '+username+'!'
  
  }

}

<input type="text" name="username" id="username">

<button class="clickMe" onclick="displayUsername()">Click ME!</button>

<div id="message"></div>

【讨论】：

【解决方案4】：

当然可以。您可以使用 DOM。在您的showDiv() function 中，您可以使用 dom 获取输入的用户名。你可以这样做：

function showDiv() {
    const username = document.getElementById("userLogin");
    const div = getElementById("login_twofactorauth_message_entercode_accountname")
    div.getElementsByTagName("p").innerText = "Hy " + username + ", welcome...";
}

这段代码应该可以解决问题！

希望对您有所帮助！

【讨论】：

【解决方案5】：

我在您的 html 中添加了一个 id="feedback"：

<div id="feedback" class="auth_modal_h1" style="display:none;">
    Hello <span id="login_twofactorauth_message_entercode_accountname"></span>!
    <p>This account is currently using a verification pin.</p>
</div>

然后，我添加了这个 javascript：

<script>
    function showDiv() {
        document.getElementById("login_twofactorauth_message_entercode_accountname").innerHTML = document.getElementById("steamAccountName").value;
        document.getElementById("feedback").style.display = 'block';
    }
</script>

【讨论】：