Added filtering of 'typeable' inputs to syn.typeable

Author: luke.whyte

src/key.js

@@ -5,21 +5,29 @@ require('./browsers');
 
 var h = syn.helpers,
 
-	selectionStartAvailable = function (el) {
-		// checking for selectionStart might throw error
-		try {
-			return el.selectionStart !== undefined;
-		} catch (e) {
-			return false;
+	inputSupportsSelectionStart = {},
+
+	supportsSelectionStart = function (el) {
+		// checking selection attrs will trigger errors on all inputs but text, url, search, tel & password.
+		// Ultimately, this creates an issue specifically w/ email and number inputs
+		if (!inputSupportsSelectionStart[el.type]) { // try to avoid having to run the try/catch repeatedly
+			try {
+				return inputSupportsSelectionStart[el.type] = el.selectionStart !== undefined;
+			} catch (e) {
+				return inputSupportsSelectionStart[el.type] = false;
+			}
+		} else {
+			return inputSupportsSelectionStart[el.type];
 		}
 	},
 
 	// gets the selection of an input or textarea
 	getSelection = function (el) {
-		var real, r, start;
+		var real, r, start,
+			isInput = el.nodeName.toLowerCase() === 'input';
 
 		// use selectionStart if we can
-		if (selectionStartAvailable(el)) {
+		if (isInput ? supportsSelectionStart(el) : el.selectionStart !== undefined) {
 			// this is for opera, so we don't have to focus to type how we think we would
 			if (document.activeElement && document.activeElement !== el &&
 				el.selectionStart === el.selectionEnd && el.selectionStart === 0) {
@@ -36,7 +44,7 @@ var h = syn.helpers,
 			//check if we aren't focused
 			try {
 				//try 2 different methods that work differently (IE breaks depending on type)
-				if (el.nodeName.toLowerCase() === 'input') {
+				if (isInput) {
 					real = h.getWindow(el)
 						.document.selection.createRange();
 					r = el.createTextRange();
@@ -76,6 +84,7 @@ var h = syn.helpers,
 					};
 				}
 			} catch (e) {
+				// the elements most likely to get caught here are input[type=number] & input[type=email]
 				var prop = formElExp.test(el.nodeName) ? "value" : "textContent";
 
 				return {
@@ -300,7 +309,7 @@ h.extend(syn, {
 
 	// selects text on an element
 	selectText: function (el, start, end) {
-		if (el.setSelectionRange && selectionStartAvailable(el)) {
+		if (el.setSelectionRange && supportsSelectionStart(el)) {
 			if (!end) {
 				syn.__tryFocus(el);
 				el.setSelectionRange(start, start);

src/typeable.js

@@ -54,9 +54,14 @@ syn.typeable.test = function (el) {
 var type = syn.typeable;
 
 // Inputs and textareas
-var typeableExp = /input|textarea/i;
+var typeableExp = /input|textarea/i,
+	selectableInputs = ['textarea', 'email', 'number', 'password', 'search', 'tel', 'text', 'url'],
+	isSelectable = function (type) {
+		return __indexOf.call(selectableInputs, type) !== -1;
+	};
+
 type(function (el) {
-	return typeableExp.test(el.nodeName);
+	return typeableExp.test(el.nodeName) && isSelectable(el.type);
 });
 
 // Content editable