vueではエンターキー登録機能を実現します。
created() {
let that = this;
document.onkeypress = function(e) {
var keycode = document.all ? event.keyCode : e.which;
if (keycode == 13) {
that.login();//
return false;
}
};
}
以上のコードは、この数日間のテストで問題が発見されました。システムにログインした後、トップページから他のインターフェースに切り替えて、バックをクリックすると、インターフェースがトップページに調整されます。実現する:
Loginインターフェースでエコーをクリックしてオンスバックを実行するだけで、他のポイントとリターンはトリガされません。(なぜ他のインターフェースでエコーがLoginインターフェースのcreated-劄| 124;を実行するのかまだ分かりません。)
考え方:
Login.vueの最外層にidを結合し、キーボードイベントを結合する。
$(“#loginDiv”).bind("keypress",toLogin);
テストでは、キーイベントが傍受できないことが分かりました。div元素は焦点を得ることができませんでした。しかし、div元素にtabIndex属性を加えると、フォーカスが得られます。<div tabIndex=-1></div>
以上の方法は、キーレスを触発することもできますが、まだ傷があります。登録ページを開く時、マウスでインターフェースをクリックしてから、キーレスを触発することができます。もう一つの考え:インターフェイスにはフォーカスが必要で、車を返す時にkeyresを実行することができます。だからインターフェイスの中でinputテキストの枠をプラスして、どこからLogin.vueまで開けてもジャンプしてもテキストの枠にピントを合わせさせます。
カスタムコマンド:
<div id="loginDiv" tabindex="1" style="outline:0;" >
<input type="text" v-focus style="opacity:0;position:absolute;">
</div>
directives: {
focus: {
//
inserted: function (el) {
el.focus()
}
}
},
カスタムコマンドとinsertedの使い方はvue公式サイトの文書から以下の通りです。知識ポイント追加:
vueプロジェクトではログイン画面で回車登録ができます。
方法1:
vueのcreatedフック関数に書いてください。
// , ,
// let that = this;
// document.onkeydown = function (e) {
// e = window.event || e;
// if(that.$route.path=='/login'&&(e.code=='Enter'||e.code=='Num Enter')){// enter
// that.handleSubmit2('ruleForm2');// (handleSubmit2('ruleForm2')- )
// }
// }
注意:メインキーボードのEnterのみを使用します。方法二:
vueのcreatedフック関数に書いてください。
var _self = this;
document.onkeydown = function(e){
var key = window.event.keyCode;
if(key == 13 || key == 100){
_self.handleSubmit2('ruleForm2');
}
}
メインキーボードとキーパッドのEnterを全部使っています。締め括りをつける
以上は小编がご绍介したvueの中でエンターキーの登录机能を実现しました。皆さんのために役に立つことを望んでいます。