CODEWITHSUNDEEP
reactjs
AOUADI Slim
AOUADI Slim

Reputation: 457

Create input text that starts with certain prefix and is not errasable

i want to create a simple input text that starts with a certain choosen prefix and it starts writing right after that prefix and when the user deletes the input text it won't delete the prefix it stays there , is there a solution to make it happen ?

                       <div className="position-relative form-group">
                            <img src="./redRisk.png" style={{ width: '2%' }} 
                               />
                               <input
                                name="titre"
                                id="exampleEmail"
                                type="text"
                                className="form-control"
                                 onChange={()=>{}}
                               />
                        </div>

Upvotes: 3

Views: 13203

Answers (2)

Jacek Rojek
Jacek Rojek

Reputation: 1122

it's doable, but i thing that option with styling text next to it is better

const prefix = 'prefix-'

 <div className="position-relative form-group">
      <input
          name="titre"
          id="exampleEmail"
          type="text"
          className="form-control"
          ref={(target)=>{
            target.value = prefix
          }}
          onChange={(e)=>{
            const input = e.target.value
            e.target.value = prefix + input.substr(prefix.length)
          }}
      />
</div>

Upvotes: 8

Donovan Hiland
Donovan Hiland

Reputation: 1499

If you don't need the prefix text to be editable you could just render it before the input and style the input accordingly:

<div className="position-relative form-group">
  <img src="./redRisk.png" style={{ width: '2%' }} />

  <div className="text-style">Prefix</div>
  <input
    name="titre"
    id="exampleEmail"
    type="text"
    className="form-control+matching-text-style"
    onChange={() => {}}
  />
</div>

Upvotes: 0

Related Questions