输入中带有图标的自定义占位符

Question

我正在尝试为我的“搜索”输入创建一个自定义占位符。它应该看起来像一个搜索图标（为此使用 Bootstrap glyphicon glyphicon-search 类），然后是输入元素内的“搜索”一词，就像占位符一样，并且居中。

我正在尝试将包含这些的 div 定位到输入中的元素，但我无法正确处理。

这是jsfiddle中的代码。

HTML：

<div class="search-wrapper">
    <form class="post_search" id="post_search" action="/posts/explore" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
        <input autocomplete="off" class="search-input" type="search" name="q[caption_or_user_user_name_cont]" id="q_caption_or_user_user_name_cont">
        <div class="placeholder">
            <div>
                <span class="glyphicon glyphicon-search"></span>
                <span>Search</span>
            </div>
        </div>
    </form>
</div>

CSS：

.search-wrapper {
  max-width: 340px;
  margin: 0 auto;
  text-align: center;
  margin-top: 20px;
  display: inline;
}

.search-wrapper .search-input {
  border: 1px solid #ddd;
  border-radius: 15px;
  background-color: #eee;
  width: 220px;
  height: 31px;
  padding: 10px 15px;
  transition: 0.25s all;
}

.search-wrapper .search-input:focus {
  outline: 0 none;
  background-color: #fff;
  transition: 0.25s all;
}

.search-wrapper .placeholder {
  display: inline;
  position: relative;
  top: 30%;
  width: 40px;
  margin: 0 auto;
  text-align: center;
  font-size: 10px;
}

那么当专注于输入时，占位符应该消失了，我想这对一些js来说应该不难。

但回到问题，我做错了什么？如何按预期显示占位符？

Answer 1

为什么不大大地简化呢？您已经拥有 HTML 中内置的placeholder！您可以执行以下操作：

input[type="search"]::-webkit-input-placeholder:before {
  content: "\e003  ";
  font-family: 'Glyphicons Halflings';
}

input[type="search"]:-moz-placeholder:before {
  content: "\e003  ";
  font-family: 'Glyphicons Halflings';

input[type="search"]::-moz-placeholder:before {
  content: "\e003  ";
  font-family: 'Glyphicons Halflings';
}

input[type="search"]:-ms-input-placeholder:before {  
  content: "\e003  ";
  font-family: 'Glyphicons Halflings';
}

<input type='search' placeholder='search here' />

现在不用担心，图标没有显示在这里，因为我没有包含 font-awesome（或任何 Glyphicons Halflings 提供的字体），但这使得它非常简单地创建一个漂亮的占位符。它甚至可以像一个一样工作！它还大大减少了您的代码，尽管浏览器支持不那么出色（这实际上取决于您想要回溯多远）。

Font Awesome 使用 unicode 字形和包含所有这些图标的字体，因此只要您使用正确的字体并将正确的字符复制到您的 content 属性中，这将起作用。

这是在 Safari 和 Chrome 中测试的

Answer 2

我的解决方案：

https://jsfiddle.net/83x8tfwp/6/

HTML：

<div class="search-wrapper">
    <form class="post_search" id="post_search" action="/posts/explore" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
        <input autocomplete="off" class="search-input" type="search" name="q[caption_or_user_user_name_cont]" id="q_caption_or_user_user_name_cont">
        <div class="placeholder">
            <div>
                <span class="glyphicon glyphicon-search"></span>
                <span>Search</span>
            </div>
        </div>
    </form>
</div>

CSS：

.search-wrapper {
  max-width: 280px;
  margin: 0 auto;
  text-align: center;
  margin-top: 20px;
  position: relative;
  color: #aaa;
}

.search-wrapper .search-input {
  border: 1px solid #ddd;
  border-radius: 15px;
  background-color: #eee;
  width: 220px;
  height: 31px;
  padding: 3px 15px;
  transition: 0.25s all;
}

.search-wrapper .search-input:focus {
  outline: 0 none;
  background-color: #fff;
  transition: 0.25s all;
}

.search-wrapper .search-input:focus + .placeholder {
  display: none;
}

.search-wrapper .placeholder {
  position: absolute;
  top: 8px;
  left: 38%;
  margin: 0 auto;
  text-align: center;
  font-size: 13px;
}

JavaScript：

$('.placeholder').on('click', function() {
    $('.search-input').focus();
});

if ($('.search-input').val()) {
    $('.placeholder').hide();
}

$('.search-input').on('blur', function() {
    if (!$('.search-input').val()) {
        $('.placeholder').show();
    }
});

$('.search-input').on('focus', function() {
    if (!$('.search-input').val()) {
        $('.placeholder').hide();
    }
});

$('.search-input').on('input', function() {
    if ($('.search-input').val()) {
        $('.placeholder').hide();
    }
});