Javascript 从输入框中读取_Javascript_Html_Login_Onblur

Javascript 从输入框中读取

javascript html login

Javascript 从输入框中读取,javascript,html,login,onblur,Javascript,Html,Login,Onblur,我正在尝试建立一个登录页面。我想从用户名文本框中读取信息，以便在带有onblur事件的javascript中使用。因此，理想情况下，当有人在输入姓名后点击标签或离开时，页面将读取姓名，并在脚本中使用它来显示有关此人的信息。所有这些都将在输入密码之前发生。有人知道用这种方式从输入框中读取信息的方法吗？这是我到目前为止所拥有的 //This will display the content function createDiv() { var divTag = document.createElem

我正在尝试建立一个登录页面。我想从用户名文本框中读取信息，以便在带有onblur事件的javascript中使用。因此，理想情况下，当有人在输入姓名后点击标签或离开时，页面将读取姓名，并在脚本中使用它来显示有关此人的信息。所有这些都将在输入密码之前发生。有人知道用这种方式从输入框中读取信息的方法吗？这是我到目前为止所拥有的

//This will display the content
function createDiv()
{
var divTag = document.createElement("div");
divTag.style.position = "absolute";
divTag.style.top = "95px";
divTag.style.left = "426px";
divTag.style.zIndex = "20";
divTag.innerHTML = "MSS";
document.getElementById('card').appendChild(divTag);
}
</script>
</head>

<body onload='init();'>

<div id="card" style="width:800px; z-index:10; height:600px; position:relative; margin-left:auto; margin-right:auto; text-align:center; margin-top:0px; background-image:url('customLoginBG.png'); background-repeat:no-repeat;">
<form method='post' action='/login'>
<ul style="list-style-type:none;">
<li> <input type='hidden' id='token' name='token' /> </li>

<!-- After tabbing away from here, I display content. -->
<li style="position:absolute; top:270px; left:260px;"> <input type='text' onblur="createDiv()" id='username' style="width:188px; height:26px; outline: none; border: none; border-color:transparent; background-image:url('inputBar.png'); " /> </li>

<li style="position:absolute; top:310px; left:260px;"> <input type='password' id='password' style="width:188px; height:26px; outline: none; border: none; border-color:transparent; background-image:url('inputBar.png'); " /> </li>
<li style="position:absolute; top:290px; left:455px;"> <input type='image' src="loginButton.png" value="Login" onclick='doLogin();' /> </li>      

</ul>  
</form>
</div>
</body>

//这将显示内容
函数createDiv（）
{
var divTag=document.createElement（“div”）；
divTag.style.position=“绝对”；
divTag.style.top=“95px”；
divTag.style.left=“426px”；
divTag.style.zIndex=“20”；
divTag.innerHTML=“MSS”；
document.getElementById（'card'）.appendChild（divTag）；
}

$（'input'）.blur（函数（）{
log（$（this.val（））；
}

使用jquery（1.7或更高版本），您只需

$("#inputboxname").on("blur", function () {
    var value = $(this).val();
    // Do stuff with value
}

您可以将事件处理程序分配给输入：

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

document.getElementById("username").onblur = function () {
  var name = this.value;
  // do something with it
};


document.getElementById（“用户名”）.onblur=function（）{
var name=this.value；
//用它做点什么
};

然而，如果你要做大量的javascript工作，我会学习使用jQuery库，使许多事情变得更加简单。但必须了解标准javascript的基本知识。

向我们展示你迄今为止的尝试。我们不介意帮助人们完成代码，但我们大多数人不只是“从头开始创建”

document.getElementById('txtbox1').onblur = function(){
     alert(this.value);
}