Question

我想将占位符和键入的输入都放在输入字段的中心，但是当没有输入时，我希望光标保持左对齐。例如，如果我使用：

input {
  text-align: center;
  width: 60px;
}

::placeholder {
  text-align: center;
}

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

这将成功地将占位符和我输入的所有输入对齐到中心，但会使光标在占位符的中心而不是向左闪烁

我想将光标移动到输入中占位符“ hello”中的h之前，但是当我键入任何输入时，功能应保持不变，即输入应居中。仅当没有输入时，光标才应保持对齐。

Answer 1

考虑:placeholder-shown，您可以轻松地做到这一点。不需要JS

input {
  text-align: center;
  width: 60px;
}

::placeholder {
  text-align: center;
}

input:placeholder-shown {
  text-align: left;
}

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

Answer 2

这是我想出的，我根据输入的内容是否包含值来切换text-align属性。我知道它会卡在输入框的中央并且不平滑，但是我不知道您是否可以对此进行任何更改。

let inp = document.getElementById("inp");

inp.addEventListener("keyup", function() {
  if (!inp.value) {
		inp.style.textAlign = "left";
	} else {
  	inp.style.textAlign = "center";
  }
});

input {
  width: 60px;
}

input::placeholder {
  text-align: center;  
}

<input id="inp" type = "text" placeholder = "hello">

如何在输入字段中将占位符/输入文本居中，但保持光标向左对齐

2 个答案: