Question

我可以在输入值之前或之后添加值吗？

我想修改显示为该值的文本，但实际上不更改该值。因此，如果我读出该值，则它仍应返回1000。

<input id="myInput" type="text" value="1000">

如何在不更改值本身的情况下在1000之前添加文本Foo或之后添加Bar？

Foo和Bar不能由用户编辑。

Answer 1

尽管这不是最优雅的方法，但一种可能性是通过辅助函数（例如下面的setValue()）将字符串的“ Foo”和“ Bar”部分包括在元素的value属性中，然后“访问所需的输入值（即下面的getValue()）时，请从输入值中清除这些多余的部分：

/* Pad input value with foo bar via custom set helper function */
function setValue(value) {
  $('input').val('Foo' + value + 'Bar');
}

/* Extract real value from input value padded with foo bar via 
custom get helper function */
function getValue() {

  const lengthOfRealValue = $('input').val().length - 6;

  return $('input').val().substr(3, lengthOfRealValue);  
}

/* Set value and cause padded side effect */
setValue('hello-world');

/* Get value from padded input value */
console.log(getValue())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input id="myInput" type="text" value="1000">

Answer 2

将数据属性用于多个输入

select SUBSTRING(Name, CHARINDEX(' ', Name),3) AS region, SUM(value) as Value 
from example
group by (SUBSTRING(Name, CHARINDEX(' ', Name),3))

$('.myInput').val(function(){
  var bef =$(this).attr('data-before');
  var aft =$(this).attr('data-after');
  return bef+$(this).val()+aft;
})

Answer 3

var input = document.getElementById('myInput'); input.value = "Foo" + input.value + "Bar";

修改

标记

span {
   display: inline-block;
   position: relative;
}

span::after {
   content: 'mm';
   position: absolute;
   right: 5px;
   top: 0;
 }

<span>
   <input id="myInput" type="text" value="1000">
</span>

Answer 4

可以将值1000保存为data-value =“ 1000”

，可以通过以下方式选择此值 document.querySelectorAll（'[data-value]'）;

或

使用

要显示的第一个输入，然后要发布到服务器的第二个

Answer 5

最简单的方法是将to和一些元素放在前后：

<span>foo</span>
<input id="myInput" type="text" value="1000">
<span>bar</span>

然后使用CSS设置<input />

的样式

在输入值之前/之后添加不可编辑的文本，而不更改值

5 个答案: