0

Can I add a value before or after an input value?

I want to modify the text shown for the value, but without actually changing the value. So If I read out the value then it should still return 1000. 

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

How can I add the text Foo before or Bar after 1000 withouth changing the value itself?

Foo and Bar should NOT be editable by the user.

Black
  • 18,150
  • 39
  • 158
  • 271
  • before/after element on a wrapper? – Temani Afif May 13 '19 at 09:40
  • Do you want to add an html element after and before the input element? Or add them into the value? It is not clear what do you want to achieve. – Lu Chinke May 13 '19 at 09:40
  • 1
    It is not clear what you're asking. Are you looking to modify the value of the input field, or are you looking for decoration text, that looks like it is part of the input, but isn't, like labels (i.e. `pay 1000 $` where `pay` and `$` is decoration)? – Slawomir Chodnicki May 13 '19 at 09:41
  • I want to modify the text shown for the value, but without actually changing the value. So If I read out the value then it should still return 1000. – Black May 13 '19 at 09:52

5 Answers5

2

Though it's not the most elegant, one possibility would be to include the "Foo" and "Bar" parts of the string in the element's value attribute via a helper function (ie setValue() below), and then "sanitize" these extra parts out of the inputs value when accessing the desired value of the input (ie getValue() below):

/* 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">
Dacre Denny
  • 29,664
  • 5
  • 45
  • 65
1

Use data attribute for multiple input 

$('.myInput').val(function(){
  var bef =$(this).attr('data-before');
  var aft =$(this).attr('data-after');
  return bef+$(this).val()+aft;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input class="myInput" type="text" data-before="foo" data-after="bar" value="1000">

<input class="myInput" type="text" data-before="foo1" data-after="bar1" value="1000">

<input class="myInput" type="text" data-before="foo2" data-after="bar2" value="1000">
prasanth
  • 22,145
  • 4
  • 29
  • 53
  • I need Foo and Bar to only be visible not editable. But I did not mentioned it, so it is my fault – Black May 13 '19 at 09:58
  • Then how do you want the entire thing to be displayed? – nimsrules May 13 '19 at 10:05
  • as `Foo 1000 Bar`, but only `1000` should be editable. In the real application I want to add `mm` (mili meters) after the input value. I thought I can solve it with CSS :after but I was not able to do it. – Black May 13 '19 at 10:07
  • `input`s do not have pseudo elements. Hence, you won't be able to use `::before` and `::after` for it. However, you can wrap it with a `span` and then use the pseudo elements – nimsrules May 13 '19 at 10:09
  • @Nimsrules, can you provide an example please? – Black May 13 '19 at 10:10
  • Kindly check my edit here - https://stackoverflow.com/a/56109751/2427237 – nimsrules May 13 '19 at 11:00
1

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

Edit

The markup

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>
Black
  • 18,150
  • 39
  • 158
  • 271
nimsrules
  • 2,026
  • 20
  • 22
  • 1
    I need the content `mm` to be right next to the value, but It seems to be impossible, so I accept your answer. – Black May 13 '19 at 15:12
1

can save value 1000 in data-value="1000"

and can select this value by document.querySelectorAll('[data-value]');

or

using

first input to display and second to post to server

Ahmed Elbendary
  • 379
  • 5
  • 7
  • 1
    I need Foo and Bar to only be visible not editable. But I did not mentioned it, so it is my fault – Black May 13 '19 at 10:04
0

This simplest way would be to and some elements before and after:

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

Then use CSS to style the <input />

Alex
  • 8,875
  • 2
  • 27
  • 44
  • Not sure why this is downvoted. It's not clear from the OP what the extra `foo` and `bar` is for. Arguably this is the better way from an accessibility standpoint? Or we could stick everything in a data attribute and stick two fingers up to accessibility? – Alex May 13 '19 at 09:45