select text on mobile safari

app/scripts/util/copy-paste.js

@@ -9,13 +9,19 @@ var CopyPaste = {
         }
     },
 
-    createHiddenInput: function(text) {
+    createHiddenInput: function(text, pos) {
         var hiddenInput = $('<input/>')
-            .attr({ type: 'text', readonly: true, 'class': 'hide-by-pos' })
             .val(text)
-            .appendTo(document.body)
-            .focus();
-        hiddenInput[0].select();
+            .attr({ type: 'text', readonly: true, 'class': pos ? '' : 'hide-by-pos' })
+            .appendTo(document.body);
+        if (pos) {
+            hiddenInput.css({ position: 'absolute', zIndex: 100, padding: 0,
+                border: 'none', background: 'transparent', color: 'transparent',
+                left: pos.left, top: pos.top, width: pos.width, height: pos.height });
+        }
+        hiddenInput.focus();
+        hiddenInput[0].selectionStart = 0;
+        hiddenInput[0].selectionEnd = text.length;
         hiddenInput.on({
             'copy': function() { setTimeout(function() { hiddenInput.blur(); }, 0); },
             blur: function() { hiddenInput.remove(); }

app/scripts/util/feature-detector.js

@@ -9,6 +9,13 @@ var FeatureDetector = {
     },
     altShortcutSymbol: function(formatting) {
         return this.isMac() ? '⌥' : formatting ? '<span class="thin">alt + </span>' : 'alt-';
+    },
+    shouldMoveHiddenInputToCopySource: function() {
+        var ua = navigator.userAgent;
+        var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
+        var webkit = !!ua.match(/WebKit/i);
+        var iOSSafari = iOS && webkit && !ua.match(/CriOS/i); // shouldn't we do this for mobile chrome as well? check it.
+        return !!iOSSafari;
     }
 };
 

app/scripts/views/fields/field-view.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var Backbone = require('backbone'),
+    FeatureDetector = require('../../util/feature-detector'),
     CopyPaste = require('../../util/copy-paste');
 
 var FieldView = Backbone.View.extend({
@@ -36,6 +37,16 @@ var FieldView = Backbone.View.extend({
     fieldLabelClick: function(e) {
         e.stopImmediatePropagation();
         var field = this.model.name;
+        if (FeatureDetector.shouldMoveHiddenInputToCopySource()) {
+            var box = this.valueEl[0].getBoundingClientRect();
+            var textValue = this.value && this.value.getText ? this.value.getText() : this.renderValue(this.value);
+            if (!textValue) {
+                return;
+            }
+            CopyPaste.createHiddenInput(textValue, box);
+            CopyPaste.tryCopy(); // maybe Apple will ever support this?
+            return;
+        }
         if (field) {
             var value = this.value || '';
             if (value && value.getText) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "keeweb",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "KeePass web app",
   "main": "Gulpfile.js",
   "repository": "https://github.com/antelle/keeweb",