Event modifier which enables text selection on focus

dist/vue-focus.common.js

@@ -12,7 +12,12 @@ if (!compatible) {
 
 var focus = {
   inserted: function(el, binding) {
-    if (binding.value) el.focus();
+    if (binding.value) {
+      el.focus();
+      if (binding.modifiers.select) {
+        el.select();
+      }
+    }
     else el.blur();
   },
 
@@ -23,7 +28,12 @@ var focus = {
       }
     }
 
-    if (binding.value) el.focus();
+    if (binding.value) {
+      el.focus();
+      if (binding.modifiers.select) {
+        el.select();
+      }
+    }
     else el.blur();
   },
 };

dist/vue-focus.js

@@ -11,7 +11,12 @@
 
   var focus = {
     inserted: function(el, binding) {
-      if (binding.value) el.focus();
+      if (binding.value) {
+        el.focus();
+        if (binding.modifiers.select) {
+          el.select();
+        }
+      }
       else el.blur();
     },
 
@@ -22,7 +27,12 @@
         }
       }
 
-      if (binding.value) el.focus();
+      if (binding.value) {
+        el.focus();
+        if (binding.modifiers.select) {
+          el.select();
+        }
+      }
       else el.blur();
     },
   };

examples/index.html

@@ -59,6 +59,21 @@ <h3><code>Example 4: Custom label</code></h3>
     </p>
     <p>NOTE: click on the label to focus the input.</p>
   </div>
+  <hr/>
+
+  <h3><code>Example 5: Select Text on Focus</code></h3>
+  <div id="example5">
+    <div><pre>{{ $data }}</pre></div>
+    <p>
+      <input type="text"
+        value="Change me"
+        v-focus.select="focused"
+        @focus="focused = true"
+        @blur="focused = false"
+      >
+    </p>
+    <p>NOTE: click text input to focus and select text.</p>
+  </div>
 
   <script>
     new Vue({
@@ -108,6 +123,15 @@ <h3><code>Example 4: Custom label</code></h3>
         focused: false,
       },
     });
+
+
+    new Vue({
+      el: '#example5',
+      mixins: [ VueFocus.mixin ],
+      data: {
+        focused: false,
+      },
+    });
   </script>
 
 </body>

index.js

@@ -9,7 +9,12 @@ if (!compatible) {
 
 export var focus = {
   inserted: function(el, binding) {
-    if (binding.value) el.focus();
+    if (binding.value) {
+      el.focus();
+      if (binding.modifiers.select) {
+        el.select();
+      }
+    }
     else el.blur();
   },
 
@@ -20,7 +25,12 @@ export var focus = {
       }
     }
 
-    if (binding.value) el.focus();
+    if (binding.value) {
+      el.focus();
+      if (binding.modifiers.select) {
+        el.select();
+      }
+    }
     else el.blur();
   },
 };