Question

我正在尝试在输入中转换搜索图标和输入占位符，因此当用户＆＃34;关注＆＃34;在输入上，占位符和搜索图标使用转换被推到左侧，到目前为止我没有问题，除了...当我输入输入时我希望图标在聚焦后保持原样，如果输入中有文字。所以现在如果你输入一个文本，然后点击输入，当然图标会回到原来的位置，因为用户＆＃34;模糊＆＃34;超出输入。

我希望图标仅保留在左侧，仅当输入内有文字时才会显示。

HTML：

<input type="text" id="search-input" placeholder="Search stuff...">
<svg height="32px" width="32px" version="1.1" viewBox="0 0 32 32" id="search-icon">
    <g id="Page-1" fill="none" stroke="none" strokeWidth="1">
        <g id="icon-111-search">
            <path id="search" d="M19.4271164,21.4271164 C18.0372495,22.4174803 16.3366522,23 14.5,23 C9.80557939,23 6,19.1944206 6,14.5 C6,9.80557939 9.80557939,6 14.5,6 C19.1944206,6 23,9.80557939 23,14.5 C23,16.3366522 22.4174803,18.0372495 21.4271164,19.4271164 L27.0119176,25.0119176 C27.5621186,25.5621186 27.5575313,26.4424687 27.0117185,26.9882815 L26.9882815,27.0117185 C26.4438648,27.5561352 25.5576204,27.5576204 25.0119176,27.0119176 L19.4271164,21.4271164 L19.4271164,21.4271164 Z M14.5,21 C18.0898511,21 21,18.0898511 21,14.5 C21,10.9101489 18.0898511,8 14.5,8 C10.9101489,8 8,10.9101489 8,14.5 C8,18.0898511 10.9101489,21 14.5,21 L14.5,21 Z" />
        </g>
    </g>
</svg>

CSS：

#search-input {
  padding: 5px;
  width: 220px;
  border-radius: 3px;
  border: 1px solid #ECECEC;
  background: #FCFCFC;
  text-indent: 23px;
  outline: none;
}

#search-input::-webkit-input-placeholder {
  position: relative;
  padding-left: 45px;
  transition: padding 0.2s;
}

#search-input:focus::-webkit-input-placeholder {
  padding-left: 0px;
}

#search-icon {
  width: 26px;
  height: 26px;
  position: absolute;
  left: 60px;
  top: 8px;
  transition: left 0.2s;
}

#search-input:focus + #search-icon {
  left: 10px;
}

#search-icon path {
  fill: #666;
}

笔右here。

我不介意将JavaScript包含在解决方案中，因为它是SPA，而且它是一个React项目，所以React相关的解决方案是首选但不是必需的。

Answer 1

我能想到的一种方式是：

将焦点修饰符css转换为类。
向搜索输入onFocus和onblur添加两个事件
在onfocus回调中添加类并在onblur中删除仅当输入框为空时才回调。

Answer 2

你可以使用:placeholder-shown但https://caniuse.com/#search=placeholder-shown

＆＃13;

input:not(:placeholder-shown) {
  background-color: yellow;
}

＆＃13;

<input type="text" placeholder="Search">

＆＃13;

用户在输入中输入文本后，保持图标就位

2 个答案: