Aureliaでスクリーンキーボードを使用するには？

Aureliaプラットフォーム（WebStorm + Aurelia + Typescript）で書かれた私のプロジェクトでオンスクリーンキーボードを使いたいです。このためには、JavaScript/HTMLベースのキーボードを使用する必要があります。次のコードは、私のために適している：私はプロジェクトにこのコードを統合する方法を知らないAureliaでスクリーンキーボードを使用するには？

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <script src="https://code.jquery.com/jquery-git.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> 
     <link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard.css"> 
     <script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script> 
     <script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script> 
     <script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script> 
     <script> 
     /* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */ 
     $(function() { 
     $('#keyboard').keyboard({ 
      layout: 'qwerty' 
     }) 
     // activate the typing extension 
     .addTyping({ 
      showTyping: true, 
      delay: 250 
     }); 
     }); 
     </script> 
    </head> 
    <body> 
     <div id="wrap"> 
     <input id="keyboard" type="text" /> 
     </div> 
    </body> 
</html> 
<body> 
    <div id="wrap"> 
    <input class="keyboard" type="text" /> 
    <input class="keyboard" type="text" /> 
    <input class="numpad" type="text" /> 
    </div> 
</body> 
</html>

。手伝っていただけませんか？

出典

2017-09-05 Sohrab

これは公開されています。狭めてください。 – evolutionxbox

私はそれをしました。ありがとうございました。 – Sohrab

申し訳ありませんが、私は失礼ではありません。 --- _ "プロジェクトでこのコードをどのように統合できるか" _は非常に未解決の問題です。どのようにできるかについての記事が書かれています。 IMOこれはStackOverflowには適していません。 – evolutionxbox

jQueryプラグインをプロジェクトに追加する方法については、これを行う方法に関する多くのブログ記事があります。その答えは、使用しているモジュールローダ/バンドラによって異なります。

このようなjQueryプラグインの使用の詳細については、カスタム属性を使用します。この例では、私はjQueryのをロードすることをhttps://gist.run?id=87b7807ef8a50301fe358b26f7263056

keyboard.js

import {inject} from 'aurelia-framework'; 

@inject(Element) 
export class KeyboardCustomAttribute { 
    constructor(el) { 
    this.el = el; 
    } 

    attached() { 
    $(this.el).keyboard({ 
     layout: 'qwerty' 
    }) 
    // activate the typing extension 
    .addTyping({ 
     showTyping: true, 
     delay: 250 
    }); 
    } 
}

app.html

<template> 
    <require from="./keyboard"></require> 

    <div> 
    <label>Name: </label> 
    <input type="text" value.bind="name" keyboard /> 
    </div> 
</template>

注：ここでは

は一例ですスクリプトを使ったもの私の人生をよりシンプルにするためのタグ。

出典

2017-09-05 14:10:19

ありがとうございます。私はそれをしましたが、このコードのように荒廃しました：$（（）=> { $（ "＃keyboard"））keyboard（kbOptions）.addNavigation（navOptions）; }）; 。私はこのエラーがある：$は関数ではない。何か解決策はありますか？ – Sohrab

私はそれがうまくいかない理由を知らない。つまり、Aureliaアプリケーションでは '$（ '＃keyboard'）'はしないでください。 AureliaアプリケーションのエレメントIDに基づいて決してクエリーセレクターを実行するべきではありません。コードがその特定のエレメントに対してのみ機能するようにするか、要素固有の名前を与えるために体操をする必要があります。 Aureliaは、jQueryに渡すことができる要素自体を提供しますので、私の例のように使用してください。 –

私もそれをやった。私は同じエラーがあります。 – Sohrab

Aureliaでスクリーンキーボードを使用するには？

答えて

関連する問題