WebAPI/KeboardIME: Difference between revisions

WebAPI/KeboardIME (view source)

Revision as of 09:38, 18 July 2013

391 bytes added , 18 July 2013

→‎Examples

Timdream

Confirmed users

478

edits

@@ Line 181: / Line 181: @@
 == Examples ==
- var im = navigator.inputMethod;
+The following "snowman filler" Keyboard app will start filling snowman character ("☃") and follow by characters "SNOW" with key events to the input field whenever the user is focus on a input field and switch to the keyboard app.
- // Called when the user starts editing an input field or switches to current IME
+If the field is a numeric field, it will fill "1337".
- im.onstart = function(event) {
-   // Text input should start
- };
-  // Called when the user finishes editing an input field or switches to another IME.
+  var im = navigator.inputMethod;
- im.onfinish = function(event) {
-   // Text input should end
- };
-  // Insert a string at the current cursor position
+  im.addEventListener('inputcontextchange', function contextchanged(evt) {
-  im.commitText('Hello world');
+   if (evt.inputContext) {
+      // Got a new context, start working with it.
- // Clear delete 5 characters before the cursor position.
+      startTyping(evt.inputContext);
- im.deleteSurroundingText(-5, 5);
+   } else {
+      // The user have removed the focus, we are not allow to type into the text field anymore.
-  // Get notified when the text content has changed.
+      stopTyping();
-  im.onsurroundingtextchange = function(beforeText, afterText) {
+   }
-    console.log(beforeText + afterText);
+  });
+ var timer;
+ function startTyping(inputContext) {
+   clearTimeout(timer);
+   timer = setInterval(function () {
+     if (inputContext.inputmode = 'numeric' || inputContext.type = 'number') {
+       inputContext.commitText('1337');
+     } else {
+       inputContext.commitText('☃');
+       'SNOW'.split('').forEach(function (k) {
+         // For capital Latin letters, keyCode is same as the charCode.
+         inputContext.sendKey(k.charCodeAt(0), k.charCodeAt(0));
+       });
+   });
+ }
+  function stopTyping() {
+    clearTimeout(timer);
   }
- // Move the cursor position
- var position = 10;
- im.setSelectionRange(position, position);
- // Hide the keyboard
- im.removeFocus();
 == Related ==