From 6d3d88831e06e9822d67991b9dcd85382a41fe69 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Sun, 12 Oct 2014 18:28:20 +0100 Subject: Add support for selecting HTML5 inputs, change criterion to a blacklist This is designed to address several issues: * `` elements don't respond well to the simulated click; they always reset their value to the minimum. * The lack of `mouseup` event from the simulated click makes `` with a `type` the browser doesn't support is rendered as a `type="text"`, so a blacklist ensures that the focusing action is consistent on all elements behaving as `type="text"`. --- lib/dom_utils.coffee | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/dom_utils.coffee b/lib/dom_utils.coffee index 62e655e7..7735f62b 100644 --- a/lib/dom_utils.coffee +++ b/lib/dom_utils.coffee @@ -94,14 +94,15 @@ DomUtils = # Selectable means the element has a text caret; this is not the same as "focusable". # isSelectable: (element) -> - selectableTypes = ["search", "text", "password"] - (element.nodeName.toLowerCase() == "input" && selectableTypes.indexOf(element.type) >= 0) || + unselectableTypes = ["button", "checkbox", "color", "file", "hidden", "image", "radio", "reset"] + (element.nodeName.toLowerCase() == "input" && unselectableTypes.indexOf(element.type) == -1) || element.nodeName.toLowerCase() == "textarea" simulateSelect: (element) -> element.focus() # When focusing a textbox, put the selection caret at the end of the textbox's contents. - element.setSelectionRange(element.value.length, element.value.length) + # For some HTML5 input types (eg. date) we can't position the caret, so we wrap this with a try. + try element.setSelectionRange(element.value.length, element.value.length) simulateClick: (element, modifiers) -> modifiers ||= {} -- cgit v1.2.3 From 5514284ea1ccaf610ba84fc51cdabee5f9e4ff68 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Sun, 14 Dec 2014 07:21:26 +0000 Subject: Update a comment about the changed nature of isSelectable --- lib/dom_utils.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/dom_utils.coffee b/lib/dom_utils.coffee index 7735f62b..73016bc8 100644 --- a/lib/dom_utils.coffee +++ b/lib/dom_utils.coffee @@ -91,7 +91,7 @@ DomUtils = null # - # Selectable means the element has a text caret; this is not the same as "focusable". + # Selectable means that we should use the simulateSelect method to activate the element instead of a click. # isSelectable: (element) -> unselectableTypes = ["button", "checkbox", "color", "file", "hidden", "image", "radio", "reset"] -- cgit v1.2.3 From e826484584f1c599e2f733765fef34e080bbcb89 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Sun, 14 Dec 2014 07:33:45 +0000 Subject: List HTML5 date types that should use simulateSelect --- lib/dom_utils.coffee | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lib/dom_utils.coffee b/lib/dom_utils.coffee index 73016bc8..73d29eb6 100644 --- a/lib/dom_utils.coffee +++ b/lib/dom_utils.coffee @@ -93,6 +93,11 @@ DomUtils = # # Selectable means that we should use the simulateSelect method to activate the element instead of a click. # + # The html5 input types that should use simulateSelect are: + # ["date", "datetime", "datetime-local", "email", "month", "number", "password", "range", "search", + # "submit", "tel", "text", "time", "url", "week"] + # An unknown type will be treated the same as "text", in the same way that the browser does. + # isSelectable: (element) -> unselectableTypes = ["button", "checkbox", "color", "file", "hidden", "image", "radio", "reset"] (element.nodeName.toLowerCase() == "input" && unselectableTypes.indexOf(element.type) == -1) || -- cgit v1.2.3