Is it possible to use multiple type attribute on input element

Question

I want to use the same input area as type: text or type: URL at the same time; Is there any way to that

<form onSubmit={this.onFormSubmit}>
     <div className='form'>
         <input
             type='text'
             placeholder='Enter search keyword or image URL'
             value={this.state.searchTerm}
             onChange={(e) => {
                 this.setState({
                     searchTerm: e.target.value
                 })
                 console.log(e.target.type)
             }} />
         <button type='submit'>Display</button>
    </div>
</form>

The input area is for image search. And I want the user to either use a keyword or image url. I'm using unsplash API for image search

Does this answer your question? HTML5 input with multiple type attributes — justDan
– justDan, Commented Dec 31, 2019 at 15:46

epascarello · Accepted Answer · 2019-12-31 15:56:48Z

2

There is no way to do multiple types, but you have the ability to swap the type. Basic idea below

document.getElementById("testNum").addEventListener("input", function () {
  this.type = this.value.match(/^[\d.]+$/) ? 'number' : 'text'
})

document.getElementById("testLink").addEventListener("input", function () {
  this.type = this.value.match(/^http/i) ? 'url' : 'text'
})

input[type="text"] {
  border-color: green;
}
input[type="number"] {
  border-color: yellow;
}
input[type="url"] {
  border-color: orange;
}

<input id="testNum" type="text" />

<input id="testLink" type="text" />

answered Dec 31, 2019 at 15:56

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is it possible to use multiple type attribute on input element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related