Fix the situation where the cursor cannot be positioned under some s…

…pecial types of input

Fix the situation where the cursor cannot be positioned under some special types of input

README.md

@@ -23,12 +23,18 @@ npm install --save power-mode-input
 ## Usage
 
 ```jsx
-import PowerModeInput from 'power-mode-input';
+import PowerModeInput from "power-mode-input";
 
-...
-PowerModeInput.make(document.getElementById("obinput"));
+const input = document.getElementById("obinput");
+PowerModeInput.make(input);
 
-// or
+// close PowerModeInput
+PowerModeInput.close(input);
+
+// destroy PowerModeInput
+PowerModeInput.destroy();
+
+// another usage
 PowerModeInput.make(".phone", {
   height: 5,
   tha: [0, 360],
@@ -88,6 +94,9 @@ key | describe |type | example
 
 ---
 
+## Explanation
+For some special types of input boxes, the cursor may not be positioned correctly. I am also looking for a solution to this problem. If you know, please let me know. [See here for specific reasons](https://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome)
+
 ## Contribution
 I very much hope that you can work with me to modify the code. I also have a lot of fun ideas. Maybe you can join me to implement it.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "power-mode-input",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Make your input box input very shocking",
   "author": "lindelof",
   "license": "MIT",

src/index.js

@@ -232,9 +232,52 @@ const getGlobalPosition = element => {
 
 const getCursorPosition = e => {
   const { currentTarget: input } = e;
-  const { selectionEnd } = input;
+  const { start, end } = getSelection(input);
+  return getCursorXY(input, end);
+};
+
+const getSelection = el => {
+  let start = 0,
+    end = 0,
+    normalizedValue,
+    range,
+    textInputRange,
+    len,
+    endRange;
+
+  if (typeof el.selectionStart === "number" && typeof el.selectionEnd === "number") {
+    start = el.selectionStart;
+    end = el.selectionEnd;
+  } else if (document.selection) {
+    range = document.selection.createRange();
+
+    if (range && range.parentElement() == el) {
+      len = el.value.length;
+      normalizedValue = el.value.replace(/\r\n/g, "\n");
+      textInputRange = el.createTextRange();
+      textInputRange.moveToBookmark(range.getBookmark());
+      endRange = el.createTextRange();
+      endRange.collapse(false);
+
+      if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
+        start = end = len;
+      } else {
+        start = -textInputRange.moveStart("character", -len);
+        start += normalizedValue.slice(0, start).split("\n").length - 1;
+
+        if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
+          end = len;
+        } else {
+          end = -textInputRange.moveEnd("character", -len);
+          end += normalizedValue.slice(0, end).split("\n").length - 1;
+        }
+      }
+    }
+  } else {
+    start = end = el.value.length;
+  }
 
-  return getCursorXY(input, selectionEnd);
+  return { start, end };
 };
 
 export default PowerModeInput;