无法在Safari for OS X中聚焦零大小输入

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

@kevin Lin我没有iphone，所以我还没有对它进行测试，但我认为视觉上隐藏输入对你有用。

＆＃13;

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;