2015.
08.
28
08:34:05
結論から書くと、keyupイベントを拾って、テキストボックスのvalue値を参照すればOKです。
それでは、詳細を書いていきます。
最近のGoogle先生って、文字を入力中でも変換候補が出ますよね？
入力中で漢字変換とかする前、文字として確定する前なのに
どうやって値を参照しているんだろう（－－？と気になったのです。
Google先生、どうやってるのよ？
早速、聞いてみました。
ふむふむ（－－）
あっ、確定前でもvalueを参照すれば値が拾えるのですか。
というわけで、メッチャ簡単でした。
keyupイベントを拾って、そこでテキストボックスのvalue値を参照するだけです。
サンプルは、こんな感じφ（－－）
やっていることは、keyup時に「text1」の値を拾って「result」に表示しているだけです。
実際にやると分かりますが、入力途中で確定前の文字も「result」に表示されます。
ちなみに、keydownイベントだと、一つ前の状態を拾うことになります。
例えば
「あ」と入力→何も表示されない
「あい」と入力→「あ」と表示される
「あいう」と入力→「あい」と表示される
のような状態ですね。
また、changeイベントだと、入力を確定するまで拾えません。
こちらは
「あ」と入力→何も表示されない
「あい」と入力→何も表示されない
「あいう」と入力→何も表示されない
「あいう」と入力後にEnterキー押下→「あいう」と表示される
となります。
素直に、keyupイベントに対して、処理を仕込んであげてください。
そんな感じ＼（－－）／
それでは、詳細を書いていきます。
最近のGoogle先生って、文字を入力中でも変換候補が出ますよね？
入力中で漢字変換とかする前、文字として確定する前なのに
どうやって値を参照しているんだろう（－－？と気になったのです。
Google先生、どうやってるのよ？
早速、聞いてみました。
ふむふむ（－－）
あっ、確定前でもvalueを参照すれば値が拾えるのですか。
というわけで、メッチャ簡単でした。
keyupイベントを拾って、そこでテキストボックスのvalue値を参照するだけです。
サンプルは、こんな感じφ（－－）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="./js/jquery-1.11.3.min.js</script>
<script>
//<!--
$(document).ready(function(){
$('#text1').keyup(function() {
$('#result').val($('#text1').val());
});
});
//-->
</script>
</head>
<body>
<input type="text" name="text1" id="text1">
<br>
<br>
<input type="text" name="result" id="result">
</body>
</html>
※jQueryは、適当に拾ってきて配置してください<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="./js/jquery-1.11.3.min.js</script>
<script>
//<!--
$(document).ready(function(){
$('#text1').keyup(function() {
$('#result').val($('#text1').val());
});
});
//-->
</script>
</head>
<body>
<input type="text" name="text1" id="text1">
<br>
<br>
<input type="text" name="result" id="result">
</body>
</html>
やっていることは、keyup時に「text1」の値を拾って「result」に表示しているだけです。
実際にやると分かりますが、入力途中で確定前の文字も「result」に表示されます。
ちなみに、keydownイベントだと、一つ前の状態を拾うことになります。
例えば
「あ」と入力→何も表示されない
「あい」と入力→「あ」と表示される
「あいう」と入力→「あい」と表示される
のような状態ですね。
また、changeイベントだと、入力を確定するまで拾えません。
こちらは
「あ」と入力→何も表示されない
「あい」と入力→何も表示されない
「あいう」と入力→何も表示されない
「あいう」と入力後にEnterキー押下→「あいう」と表示される
となります。
素直に、keyupイベントに対して、処理を仕込んであげてください。
そんな感じ＼（－－）／
category:● JavaScript thema:パソコンな日々 - genre:コンピュータ Posted by ササキマコト