Javascript 一旦检测到搜索框中的输入，将显示一个字体图标

我正在尝试在检测到输入后显示一个字体可怕图标，字体可怕搜索图标必须在用户开始键入内容之前不可见，但该图标会一直闪烁，并且由于某种原因，会与输入框一起跳跃。它必须仅在用户输入后显示

这是代码笔：

$（文档）.ready（函数（）{
var cursorBlink=setInterval（函数blink（）{
$（“.searchRequest”）.toggleClass（“隐藏”）；
}, 500);
$（“.searchRequest”）。在（“单击”，函数（）{
clearInterval（游标链接）；
})
var图标=”；
如果（$（“.searchRequest”）.length>0）{
console.log（“不再为空”）；
$（“.searchIcon”）.append（图标）；
}
});
正文{
背景：#7b4397；
/*旧浏览器的回退*/
背景：-webkit线性梯度（向左，#7b4397，#dc2430）；
/*Chrome 10-25，Safari 5.1-6*/
背景：线性梯度（向左，#7b4397，#dc2430）；
/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
}
.标题文字{
边缘顶部：100px；
左边缘：25%；
右边距：25%；
颜色：白色；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：60px；
字体重量：较轻；
}
.searchRequest{
边缘顶部：5px；
左边缘：25%；
右边距：25%；
边界：0；
大纲：无；
盒影：无；
背景色：继承；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：40px；
颜色：白色；
字体重量：较轻；
不透明度：0.5；
盒宽：50px；
盒子高度：5px：
}
.fa搜索{
颜色：白色；
字体重量：较轻；
边缘顶部：2倍；
左缘：40%；
保证金权利：25%
}
.隐藏{
可见性：隐藏；
}
.我{
颜色：白色；
浮动：对；
}

维基百科
查看器
将您的JavaScript更新为：

$(document).ready(function() {

  var icon = "<i class='fa fa-search fa-2x'></i>";

  $('#cursor').on('keydown', function(){
    var searchIcon = $('.searchIcon');

    if (searchIcon.html().indexOf('fa-search') === -1) { // Prevents inserting multiple icons
      searchIcon.append(icon);
    }
  })

});

$（文档）.ready（函数（）{
var图标=”；
$（'#cursor'）。on（'keydown'，function（）{
var searchIcon=$（'.searchIcon'）；
如果（searchIcon.html（）.indexOf（'fa-search'）==-1）{//防止插入多个图标
searchIcon.append（图标）；
}
})
});

更新了闪烁效果和钢笔示例：

闪烁效果来自
嗯，你的代码每500毫秒隐藏和取消隐藏一次你的输入框，因此很难点击它。你的HTML也是无效的：应该没有
，因为它是一个空标签。谢谢你，迈克，我已经修改了HTML。通过隐藏和取消隐藏输入框，我试图实现下划线的闪烁效果。嗯，确实如此，但它也会使你的页面跳转，所以选择你的毒药。另外，
$（“.searchRequest”）.length>0
将始终为
true
，因为这只是检查元素是否存在。我想您需要
$（“.searchRequest”）.val（）.length>0
…非常感谢。使用$（“.searchRequest”）.val（）.length>0，在我开始键入后，图标不会出现…对，因为您只在页面加载时进行检查。请参阅@bini的答案以了解该代码的放置位置。为什么不使用
！searchIcon.has（'.fa search'）
而不是搜索HTML？另外，由于您已经做过一次
$（'.searchIcon'）
，只需在
append
之前使用
searchIcon
…我不知道该方法有什么作用，实际上并不喜欢jQuery。不过，关于第二部分你是对的。这一部分很有趣，但并不闪烁。我正在尝试为占位符“”实现闪烁效果，您可以使用CSS来实现。检查笔：