Input field with immutable text at end-CodePudding

I want an input field with a "%" at the back of the input always. This is my react component so far:

              <StyledBaseInput
                type="text"
                className="form-control"
                value={inputAmount}
                onChange={handleInputChange}
              />

CodePudding user response：

<StyledBaseInput
   type="text"
   className="form-control"
   value={inputAmount '%'}
   onChange={handleInputChange}
/>
var handleInputChange = (e) => {
  setInputAmount(e.target.value.slice(0, -1))
}

If you use class component, try like this

<StyledBaseInput
  type="text"
  className="form-control"
  value={inputAmount   '%'}
  onChange={handleInputChange}
/>

var handleInputChange = (e) => {
  setState({inputAmount: e.target.value.slice(0, -1)})
}

CodePudding user response：

 <div >
    <label for="inputValidation">Enter size:</label>
    <input type="text" id="inputValidation" placeholder="size"/>
    <span >px</span>
 </div>

.size-input-wrapper {
    max-width: 208px;
    margin: auto;
    position: relative;
    display: inline-block;
}
#inputValidation {
    padding-right: 35px;
}
.pxSpan {
    position: absolute;
    top: 19px;
    right: 10px;
}