2012-09-05 64 views
-1

我正試圖建立一個登錄頁面。我想從用戶名文本框中讀取信息以在onblur事件中使用javascript。因此,理想情況下,當有人在輸入姓名後進行標記或點擊時,該頁面將會讀取姓名,並將其用於腳本中以顯示有關該人的信息。所有這些都會在密碼輸入之前發生。有人知道以這種方式從輸入框中讀取信息的方式嗎?這是迄今爲止我所擁有的。從輸入框中讀取onblur

//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> 
+1

向我們展示您到目前爲止所嘗試的內容。我們不介意幫助人們完成代碼,但我們大多數人不只是「從頭開始創建」。 –

回答

0

$('input').blur(function() { console.log($(this).val()); }

1

與jQuery(1.7或更高版本),你只是做

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

您可以分配onblur事件處理程序的輸入:

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

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

但是,如果你的布萊恩g要做很多javascript的東西,我會學習使用jQuery庫,使得很多事情變得簡單得多。但是理解標準javascript的基礎是必須的。