Add non-editable elements before and after an input

Question

First of all, the question is really similar to this one in particular but, as the user that asked the question said, it's not entirely answered, and i would know if it's posible or not to accomplished and how, so, here's what i need to do:

I need to put elements (like text or icon images) after and before the input, at the side of the input field (not like in the example of the referenced post where the mm of the text are on absolute at the end of the container, but more like as the user black said, right next to the value), unchangeable to the user, and without affecting the end value.

this is my code:

const ProductPrice = () => {
  const [info, setInfo] = useState({
    discountPrice: '',
  });
  
  const handleChange = (e) => {
    const value = e.target.value
    setInfo({
      ...info,
      [e.target.name]: value
    })
  }

  return (
    <div className='price-container'>
      <input
        name='discountPrice'
        type='number'
        placeholder=''
        onChange={handleChange}
        value={info.discountPrice}
      />
    </div>
  );
};

and this is a graphical example of how the final result should look:

It may be worth googling input masking, I'm not sure whether you'll have any joy creating a coloured icon though. I would suggest faking the input. — Djave, Mar 08 '23 at 17:02

score 0 · Answer 1 · answered Mar 08 '23 at 17:11

Its worth saying: you won't be able to just add a coloured icon into the value of the input. You may be able to use background images, its the positioning of the right hand one you'll struggle with.

Somewhere along the line you are going to have to fake it or cheat how you display the input.

For example, the label looks like an input, has any elements you need inside it and as you type, the input within that grows:

// https://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input
var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function

function resizeInput() {
  this.style.width = this.value.length + "ch";
}

.looks-like-input{
  border: 1px solid #ccc;
  background: #f5f5f5;
  padding: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
}
.looks-like-input input{
  background: transparent;
  border: none;
}

<label for="text" class="looks-like-input">
  $
  <input type="text" id="text" />
  <svg width="20" height="20">
    <circle cx="10" cy="10" r="10" fill="green"></circle>
    <rect x="5" y="5" width="10" height="10" fill="#fff"></rect>
  </svg>
</label>

I often find with this stuff that a small change of the design leads to a much more robust front end. I'd not mess around with resizing inputs and things like that unless it was my last resort.

Add non-editable elements before and after an input

1 Answers1