javascript - 无法在 OS X 的 Safari 中聚焦零尺寸输入

Question

如果我在 OS X 的 Safari 9.1.3 中将其设置为零大小，我将无法专注于输入。

function doFocus() {
  document.querySelector("#input").focus();
}

input[type="text"] {
  /* make input zero size */
  border: none;
  width: 0;
  padding: 0;

  border-bottom: 2px solid transparent;
  transition: width .2s;
}
input[type="text"]:focus {
  border-bottom-color: #999;
  width: 200px;
}

<input type="text" id="input" placeholder="(placeholder)" />
<button onClick="doFocus()">Focus</button>

转载于此:https://codepen.io/kevinptt/pen/baoOXB

Answer 1

@kevin Lin 我没有 iPhone，所以我没有测试过它，但我认为视觉隐藏输入对你有用。

.visuallyhidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0);
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}


// add this class when input will get focus

.reset-visuallyhidden {
  position: static;
  overflow: auto;
  clip: none;
  height: auto;
  margin: 0;
  padding: var(--padding, 0);
  border: 0;
}