Question

我有一个带有以下HTML的文本输入：

<span>
    &#9997;
</span>
<input type="text">

和相应的CSS：

input{
    text-align: center;
    border: none;
    outline: none;
    background-color: transparent;
}

输入元素应无缝混合到其背景中，只有HTML图标表明它确实是一个输入。当新文本添加到输入中时，HTML图标将保持静态位置并带有当前标记。

无论如何，我的HTML图标从第一个字母的左边开始，并且当文本字符串的左边界朝同一方向推动时，它会逐渐向左移动吗？

Fiddle Example

Answer 1

如果你对满足感不满意，你可以试试这个：

span{
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
span::before {
  content: '\270D';
}

 <span contenteditable='true'></span>

Answer 2

使用jquery可能但不完美（需要大量工作）的想法。

fiddle

$('input').bind('keypress', function(e) {
	var tester = $(this).val().length;
  var code = e.keyCode || e.which;
  var currentWidth = $('input').css('width').slice(0, -2);
  var currentWidthParsed = parseInt(currentWidth, 10);
 	if(code == 8) {
    var newWidth = (currentWidthParsed - 8) + 'px'
    $('input').css('width', newWidth);
 } else {
    var newWidth = (currentWidthParsed + 8) + 'px'
    $('input').css('width', newWidth);
 }
});

body {
  text-align: center;
}
input{
    text-align: left;
    border: none;
    outline: none;
    background-color: transparent;
    width: 100px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span>
  &#9997;
</span>
<input type="text">

Answer 3

据我所知，你不能使用宽度：auto等输入的动态宽度。在这种情况下，您可以使用固定的包装器和右对齐的文本。

所以我想说唯一的可能性就是在输入值中包含该图标（如果它可能以UTF-8图标存在），然后在处理值时将其删除。但当然这看起来很脏。

CSS - 使用居中文本对齐输入文本进行图像移动

3 个答案: