Question

如何仅使用CSS更改焦点上的输入占位符的文本？初始状态：

<form action="">
  <input type="text" placeholder="Search">
  <button type="submit">Search</button>
</form>

我想重点关注输入内容。我只需要使用CSS，而不是js。

<form action="">
  <input type="text" placeholder="Hello">
  <button type="submit">Search</button>
</form>

Answer 1

那真的不是CSS的目的。

CSS用于样式化内容； HTML用于实际的内容本身。

如果您需要在HTML加载后修改内容，那么这就是Javascript的目的。

因此，您问题的真正答案是：直接修改HTML或使用Javascript。

使用Vanilla Javascript，您可以使用其ID更改输入元素。

function changeOutput(){
  document.getElementById('hi').value = "changed text";
}

<h1>Hello World!</h1>
INPUT: <input type="text" id="hi" placeholder="placeholding text" onfocus="changeOutput()"/>

Live Example

Answer 2

假设您需要更改文本框的值，以便通过 JavaScript 或 Jquery 进行操作。 CSS 和 JavaScript 有两种不同的方式。如果您的问题与样式CSS有关，则为解决方案，如果功能和逻辑由Javascript负责

<input type="text" id="txt" placeholder="Search" onfocus="changeOutput()"/>

<script>
function changeOutput(){
  document.getElementById('txt').value = "Hello";
}
</script>

Answer 3

有点棘手。我们可以在输入元素上使用:placeholder-shown和:focus，但是很遗憾，不能使用::after或::before（因为它们是使用纯CSS调整文本内容的唯一方法和content道具）。

因此，想法是创建一个输入容器，一个输入和一个假冒的占位符作为跨度。

.input-container {
  position: relative;
}

input:placeholder-shown + .placeholder::after {
  content: "placeholder";
}
input:placeholder-shown:focus + .placeholder::after {
  content: "focus";
}

.placeholder {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="input-container">
  <input placeholder=" "/>
  <span class="placeholder" />
</div>

通过这种方式，我们将知道占位符何时可见（尚无输入），何时成为焦点，并且通过同级选择器，可以在之后控制假的占位符，

如何仅更改使用CSS的焦点上的输入占位符的文本？

3 个答案: