input标签placeholder属性实现彩色高亮提示显示效果

在一些设计的比较好的软件中，我们经常会看到在文本输入框中，会有彩色高亮的效果，对用户体验有很大帮助，以我们经常使用的宝塔面板为例，在用户需要删除文件时，摒弃了以往的confirm对话框，而是使用input重新模拟了一种权限的对话确认效果，如图所示：

熟悉前端开发的朋友，第一时间就能反应过来，这种效果，需要用css去模拟实现，不能直接实现，input元素的placeholder属性是不支持嵌套元素的，会原原本本的输出属性里的所有内容。因此，这里我们需要用一个p标签或者span标签来模拟实现。

html代码如下：

<p class="tips">您确定要清空回收站吗，该操作将永久删除文件，是否继续操作？</p>
<div class="confirm-box">
    <input type="text" name="test">
    <span class="placeholder">如果确认操作，请手动输入‘<font style='color:red;'>清空回收站</font>’</span>
</div>

我们使用CSS定位，将提示文字，移动到input元素的显示框内，CSS样式代码如下：

body{ font-size: 62.5%;}
p.tips{ font-size: 1.4em;}
.confirm-box{
    position: relative;
}
.confirm-box input{
    width: 30em; height: 3em; font-size: 100%; border: .1rem solid #ccc; padding: 0;
    background: transparent; outline: none; text-indent: .5em;
}
.placeholder{
    position: absolute; color: #ccc; line-height: 3em; top: .1em; left: .5em; z-index: -1;
}

此时，如下图所示，我们需要的前端模拟效果基本就完成了：

但是，为了更好的用户体验，我们还需模拟placeholder的一些效果，如，鼠标置入时提示文字消失，表单失去焦点时，如果表单内未输入任何文字，则重现提示文字。这里，我们使用jquery来实现。代码如下：

$(function (){
    let input = $('input'),
        placeholder = $('.placeholder');
    input.focus(function (){
        placeholder.hide();
    }).blur(function (){
        if (!input.val()){
            placeholder.show();
        }
    })
})

至此，我们完美的实现了input的彩色高亮提示效果，希望在自己项目中有用到的小伙伴可以参考。