Jquery 不键入时隐藏输入文本字段

当我在输入表单中键入文本时，文本在消失之前只会短暂显示，唯一可以防止这种情况发生的方法是将手指放在键盘上的字母上

当我设置resizeInput属性时，这个问题才开始出现，该属性使输入框根据其内部的值进行更改，例如，输入框随着我键入的每个字母而变大

我有没有办法阻止这种事情发生

*JSFIDLE中的jquery出现了一些问题，resizeInput由于某种原因无法正常工作，这不会给您带来“文本在消失之前仅短暂显示”的效果。但是，如果在文本框外单击，问题仍然相同

JS小提琴：

HTML

<input id="message" type="text" placeholder="It's your turn to type....!" required="required">

---

从css中删除

行高

，并将jQuery包含到您的小提琴中，它就会工作

---

从css中删除

行高

，并将jQuery包含到您的小提琴中，它就会工作

---

从css中删除线条高度，它将正常工作

更新小提琴：

您的新CSS：

input 
{
    display: block;
    margin: 20px;
    width: auto;
    height: 60px;
    font-size: 50px;
    color: #000000;
    outline:none;
 }

---

行高度对于输入来说太大，这就是为什么它会这样做。试着把它变小一点，它会工作的

从css中删除行高，它会工作的

更新小提琴：

您的新CSS：

input 
{
    display: block;
    margin: 20px;
    width: auto;
    height: 60px;
    font-size: 50px;
    color: #000000;
    outline:none;
 }

---

行高度对于输入来说太大，这就是为什么它会这样做。试着把它弄小一点，它会起作用的

去掉线的高度或者把它弄小一点

---

删除线的高度或使其变小

---

@Justinas不，如果不这样做，则当您停止输入字母时，文本将消失，即使调整大小有效。问题不在于调整大小不起作用，而在于为什么文本会消失。一旦浏览器将行高度应用于新键入的文本，文本就会消失。您已将行高设置为15em-字体大小的15倍。正在渲染文本，但文本在可视范围外垂直对齐。减少行高/完全删除行高，或者增加输入框的大小。@Alexandros好吧，我使用FireFox，并且不会消失text@Justinas不同的渲染Isuppose@Justinas不，当您停止输入字母时，文本将消失，即使调整大小有效。问题不在于调整大小不起作用，而在于为什么文本会消失。一旦浏览器将行高度应用于新键入的文本，文本就会消失。您已将行高设置为15em-字体大小的15倍。正在渲染文本，但文本在可视范围外垂直对齐。减少行高/完全删除行高，或者增加输入框的大小。@Alexandros好吧，我使用FireFox，并且不会消失text@Justinas我想是不同的渲染