-1

ログインページを作成しようとしています。ユーザー名テキスト ボックスから情報を読み取り、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>
4

4 に答える 4

1

jquery (1.7 以降) を使用すると、

$("#inputboxname").on("blur", function () {
    var value = $(this).val();
    // Do stuff with value
}
于 2012-09-05T14:00:38.657 に答える
0

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

于 2012-09-05T14:00:32.370 に答える
0

onblurイベント ハンドラーを入力に割り当てることができます。

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

​document.getElementById("username").onblur = function () {
  var name = this.value;
  // do something with it
};​​​
于 2012-09-05T14:01:31.053 に答える
0 
document.getElementById('txtbox1').onblur = function(){
     alert(this.value);
}​​​​​​

ただし、JavaScript をたくさん使う場合は、jQuery ライブラリの使い方を学び、多くのことをより簡単にできるようにします。ただし、標準の JavaScript の基本を理解することは必須です。

于 2012-09-05T14:02:27.187 に答える