Question

我想通过javascript为占位符文本设置动画。

我想添加一个带有占位符文本的claass或其他任何javascript选择器，以便我可以在javascript代码中使用该选择器。

这是我的代码。

    ::-webkit-input-placeholder { /*Chrome/Opera/Safari */
        font-family: 'Roboto', sans-serif;
        color: purple;
        font-weight: bold;
        font-size: 16px;
    
    }
     ::-moz-placeholder { /* Firefox 19+ */
        font-family: 'Roboto', sans-serif;
        color: purple;
        font-weight: bold;
        font-size: 16px;
    } */
    :-ms-input-placeholder { /*IE 10+ */
        font-family: 'Roboto', sans-serif;
        color: purple;
        font-weight: bold;
        font-size: 16px;
    }
    input {
        font-size: 10px;
        color: #f7f102;
        background-color: #df935e;
        -webkit-rtl-ordering: logical;
        cursor: text;
        border-width: 0px;
        font-family: 'Major Mono Display', monospace;
        padding: 5px 35px 3px 26px;
        margin: 2px 2px 1px 2px;
        border-radius: 3px;
    }

    <div>
    <input type="text" placeholder="A placeholder">
    </div>

Answer 1

这是不可能的。类只能应用于元素，不能应用于属性。最好的选择是将一个类应用于输入元素本身，然后根据需要使用该类来访问占位符。

const placeholder = document.querySelector('.placeholder')
placeholder.addEventListener('focus', () => {
  placeholder.placeholder = "World"
})

<input class="placeholder" placeholder="Hello" />

Answer 2

由于占位符不是元素，因此无法直接访问它。像querySelector don't support pseudo-elements之类的功能。

相反，修改其周围的样式以创建所需的动画效果。

例如，使用CSS变量定义颜色，使用transition属性使颜色变化为动画，然后使用JavaScript更改CSS变量。

function animate() {
  document.documentElement.style.setProperty("--placeHolderColor", "#fff")
}

setTimeout(animate, 500);

html {
  --placeHolderColor: #000;
}

::-webkit-input-placeholder {
  /*Chrome/Opera/Safari */
  font-family: 'Roboto', sans-serif;
  color: var(--placeHolderColor);
  transition: color 2s;
  font-weight: bold;
  font-size: 16px;
}

 ::-moz-placeholder {
  /* Firefox 19+ */
  font-family: 'Roboto', sans-serif;
  color: var(--placeHolderColor);
  transition: color 2s;
  font-weight: bold;
  font-size: 16px;
}

*/ :-ms-input-placeholder {
  /*IE 10+ */
  font-family: 'Roboto', sans-serif;
  color: var(--placeHolderColor);
  transition: color 2s;
  font-weight: bold;
  font-size: 16px;
}

input {
  font-size: 10px;
  color: #f7f102;
  background-color: #df935e;
  -webkit-rtl-ordering: logical;
  cursor: text;
  border-width: 0px;
  font-family: 'Major Mono Display', monospace;
  padding: 5px 35px 3px 26px;
  margin: 2px 2px 1px 2px;
  border-radius: 3px;
}

<div>
  <input type="text" placeholder="A placeholder">
</div>

如何在占位符文本上添加javascript类或选择器？

2 个答案: