Make the hashed password field a div, since it works better on mobile.

diff --git a/core.css b/core.css
index cbef20f3f1c37710170d8332cd6e79a6bf022b2d..8846a37bb72ca4087975d2fa49f9f35f69ba987d 100644 (file)
--- a/core.css
+++ b/core.css
@@ -38,7 +38,8 @@ li label {
   font-weight: bold;
 }
 
-li input {
+li input, li .input {
+  display: inline-block;
   padding: .3em;
   width: 22em;
   font-size: 1em;
@@ -91,7 +92,7 @@ hr {
     margin-bottom: 1.4em;
   }
 
-  li input {
+  li input, li .input {
     display: block;
     width: 100%;
     box-sizing: border-box;

diff --git a/core.html b/core.html
index 7b8bf69684c02e1a8e02e5980d100d83b6fec392..36b4a585ea8588767f26746736e27e71e2b7702d 100644 (file)
--- a/core.html
+++ b/core.html
@@ -30,7 +30,7 @@
 
         <li>
           <label for="password">Computed Password</label>
-          <input type="text" id="password" readonly />
+          <div class="input" id="password">&nbsp;</div>
         </li>
 
         <li>

diff --git a/core.js b/core.js
index 747968e44c4da9294c9d87d80ccf7dc426178c4e..3986dae01f959e41201b52d72c39b5e007b85926 100644 (file)
--- a/core.js
+++ b/core.js
@@ -69,15 +69,13 @@ SkeletonKey.prototype._init = function() {
   this._sitekey.onkeyup = this._nextFieldInterceptor.bind(this);
   this._username.onkeyup = this._nextFieldInterceptor.bind(this);
 
-  this._password.onmousedown = this._selectPassword.bind(this);
-  this._password.labels[0].onmousedown = this._selectPassword.bind(this);
-
-  function eatEvent(e) {
-    e.stopPropagation();
-    e.preventDefault();
+  if (!this._isTouchDevice()) {
+    this._password.onmousedown = this._selectPassword.bind(this);
+    this._password.onmouseup = function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    };
   }
-  this._password.onmouseup = eatEvent;
-  this._password.labels[0].onmouseup = eatEvent;
 
   if (this._isChromeExtension()) {
     this._initChromeExtension();
@@ -107,7 +105,7 @@ SkeletonKey.prototype._onGenerate = function(e) {
   if (hexString.length > maxLength)
     hexString = hexString.substr(0, maxLength);
 
-  this._password.value = hexString;
+  this._password.innerText = hexString;
   this._selectPassword();
 };
 
@@ -181,8 +179,19 @@ SkeletonKey.prototype._nextFieldInterceptor = function(e) {
  * @private
  */
 SkeletonKey.prototype._selectPassword = function() {
-  this._password.focus();
-  this._password.select();
+  this._generateButton.blur();
+
+  // Touch devices do not bring up the edit controls (for copy) for
+  // pre-selected text.
+  if (this._isTouchDevice())
+    return;
+
+  var range = document.createRange();
+  range.selectNode(this._password.firstChild);  // Select #text node.
+
+  var selection = window.getSelection();
+  selection.removeAllRanges();
+  selection.addRange(range);
 };
 
 /**
@@ -236,3 +245,12 @@ SkeletonKey.prototype._initChromeExtension = function() {
 SkeletonKey.prototype._isChromeExtension = function() {
   return typeof chrome !== 'undefined' && typeof chrome.tabs !== 'undefined';
 };
+
+/**
+ * Checks if SkeletonKey is running on a touch device.
+ * @returns {bool}
+ * @private
+ */
+SkeletonKey.prototype._isTouchDevice = function() {
+  return typeof document.createTouch === 'function';
+}