Add inputType property into QuestionText: #141

src/knockout/koquestion_text.ts

@@ -2,11 +2,25 @@
 import {JsonObject} from "../jsonobject";
 import {QuestionFactory} from "../questionfactory";
 import {QuestionImplementor} from "./koquestion";
+import {Question} from "../question";
+
+export class QuestionTextImplementor extends QuestionImplementor {
+    constructor(public question: Question) {
+        super(question);
+    }
+    protected updateValue(newValue: any) {
+        super.updateValue(newValue);
+        if (newValue !== this.question.value) {
+            this.koValue(this.question.value);
+        }
+    }
+
+}
 
 export class QuestionText extends QuestionTextModel {
     constructor(public name: string) {
         super(name);
-        new QuestionImplementor(this);
+        new QuestionTextImplementor(this);
     }
 }
 

src/knockout/templates/question-text.html

@@ -1,3 +1,3 @@
 <script type="text/html" id="survey-question-text">
-    <input type="text" data-bind="attr: {size: question.size}, value:question.koValue, css: $root.css.text"/>
+    <input data-bind="attr: {type: question.inputType, size: question.size}, value:question.koValue, css: $root.css.text"/>
 </script>

src/question_text.ts

@@ -4,6 +4,7 @@ import {Question} from "./question";
 
 export class QuestionTextModel extends Question {
     public size: number = 25;
+    public inputType: string = "text";
     constructor(public name: string) {
         super(name);
     }
@@ -12,8 +13,23 @@ export class QuestionTextModel extends Question {
     }
     isEmpty(): boolean {  return super.isEmpty() || this.value == ""; }
     supportGoNextPageAutomatic() { return true; }
+    protected setNewValue(newValue: any) {
+        newValue = this.correctValueType(newValue);
+        super.setNewValue(newValue);
+    }
+    protected correctValueType(newValue: any): any {
+        if (!newValue) return newValue;
+        if (this.inputType == "number" || this.inputType == "range") {
+            return this.isNumber(newValue) ? parseFloat(newValue) : "";
+        }
+        return newValue;
+    }
+    private isNumber(value): boolean {
+        return !isNaN(parseFloat(value)) && isFinite(value);
+    }
 }
 
-JsonObject.metaData.addClass("text", [{ name: "size:number", default: 25 }], function () { return new QuestionTextModel(""); }, "question");
+JsonObject.metaData.addClass("text", [{ name: "inputType", default: "text", choices: ["color", "date", "datetime", "datetime-local", "email", "month", "password", "range", "tel", "text", "time", "url", "week"] },
+    { name: "size:number", default: 25 }], function () { return new QuestionTextModel(""); }, "question");
 
 QuestionFactory.Instance.registerQuestion("text", (name) => { return new QuestionTextModel(name); });

src/react/reactquestiontext.tsx

@@ -24,7 +24,7 @@ export class SurveyQuestionText extends React.Component<any, any> {
     render(): JSX.Element {
         if (!this.question) return null;
         return (
-            <input className={this.css} type="text" value={this.question.value || ''} size={this.question.size} onChange={this.handleOnChange} />
+            <input className={this.css} type={this.question.inputType} value={this.question.value || ''} size={this.question.size} onChange={this.handleOnChange} />
         );
     }
 }

tests/surveyquestiontests.ts

@@ -466,4 +466,20 @@ QUnit.test("Matrixdropdown isRequiredInAllRows", function (assert) {
     assert.equal(rows[1].isEmpty, true, "There is no error in the second row");
     question.minRowCount = 2;
     assert.equal(question.hasErrors(), true, "Error, value in all rows are required");
+});
+QUnit.test("Text inputType=number", function (assert) {
+    var question = new QuestionTextModel("text");
+    question.inputType = "number";
+    question.value = "2";
+    assert.strictEqual(question.value, 2, "make it numeric");
+    question.value = "2.25";
+    assert.strictEqual(question.value, 2.25, "make it numeric/float");
+    question.value = "2.25sdd";
+    assert.ok(!question.value, "it is empty");
+});
+QUnit.test("Text inputType=range", function (assert) {
+    var question = new QuestionTextModel("text");
+    question.inputType = "range";
+    question.value = "25";
+    assert.strictEqual(question.value, 25, "make it numeric");
 });