added support for outputing streams to form elements

Author: nfriedly

dist/watson-speech.js

@@ -23,6 +23,7 @@
     "eslint": "^1.10.3",
     "eslint-config-google": "^0.3.0",
     "expect.js": "^0.3.1",
+    "jquery": "^2.2.1",
     "jsdoc": "^3.4.0",
     "karma": "^0.13.19",
     "karma-browserify": "^5.0.1",

package.json

@@ -9,33 +9,40 @@ var defaults = require('defaults');
  *
  * Can show interim results when in objectMode
  *
- * @todo: consider automatically setting the value attribute on <input> elements
- *
  * @param options
  * @param {String|DOMElement} options.outputElement
+ * @param {String} [options.property] what property of the element should the text be set to. Defaults to `value` for `<input>`s and `<textarea>`s, `textContent` for everything else
  * @param {Boolean} [options.clear=true] delete any previous text
  * @constructor
  */
 function WritableElementStream(options) {
   this.options = options = defaults(options, {
     decodeStrings: false,  // false = don't convert strings to buffers before passing to _write (only applies in string mode)
+    property: null,
     clear: true
   });
 
   this.el = typeof options.outputElement === 'string' ?  document.querySelector(options.outputElement) : options.outputElement;
 
   if (!this.el) {
-    throw new Error('Watson Speech to Text WriteableElementStream: missing outputElement');
+    throw new Error('Watson Speech to Text WritableElementStream: missing outputElement');
   }
 
   Writable.call(this, options);
 
+  // for most elements we set the textContent, but for form elements, the value property is probably the expected target
+  var propMap = {
+    INPUT: 'value',
+    TEXTAREA: 'value'
+  };
+  this.prop = options.property || propMap[this.el.nodeName] || 'textContent';
+
   if (options.clear) {
-    this.el.textContent = '';
+    this.el[this.prop] = '';
   }
 
   if (options.objectMode) {
-    this.finalizedText = this.el.textContent;
+    this.finalizedText = this.el[this.prop];
     this._write = this.writeObject;
   } else {
     this._write = this.writeString;
@@ -45,16 +52,16 @@ util.inherits(WritableElementStream, Writable);
 
 
 WritableElementStream.prototype.writeString = function writeString(text, encoding, next) {
-  this.el.textContent += text;
+  this.el[this.prop] += text;
   next();
 };
 
 WritableElementStream.prototype.writeObject = function writeObject(result, encoding, next) {
   if (result.final) {
     this.finalizedText += result.alternatives[0].transcript;
-    this.el.textContent = this.finalizedText;
+    this.el[this.prop] = this.finalizedText;
   } else {
-    this.el.textContent = this.finalizedText + result.alternatives[0].transcript
+    this.el[this.prop] = this.finalizedText + result.alternatives[0].transcript
   }
   next();
 };

speech-to-text/writable-element-stream.js

@@ -4,6 +4,8 @@ var assert = require('assert');
 
 var WritableElementStream = require('../speech-to-text/writable-element-stream.js');
 
+var $ = require('jquery');
+
 describe('WritableElementStream', function() {
 
   it ('should accept strings/buffers and write out contents when in string mode', function() {
@@ -52,4 +54,21 @@ describe('WritableElementStream', function() {
     }]});
     assert.equal(el.textContent, 'abcdef');
   });
+
+  ['<textarea/>','<input type="text"/>'].forEach(function(tag) {
+    it ('should set the correct value for ' + tag, function() {
+      var $el = $(tag),
+          el = $el[0];
+      var s = new WritableElementStream({outputElement: el, objectMode: true});
+      s.write({final: true, alternatives: [{
+        transcript: 'abc'
+      }]});
+      s.write({final: true, alternatives: [{
+        transcript: '123'
+      }]});
+      assert.equal($el.val(), 'abc123'); // trust jQuery to know what the correct attribute *should* be
+    });
+  });
+
+
 });