javascript - 是否可以在输入元素上使用多种类型属性

Question

我想同时使用与 type: text 或 type: URL 相同的输入区域；有什么办法吗

<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>

输入区域用于图像搜索。我希望用户使用关键字或图像网址。我正在使用 unsplash API 进行图像搜索

Answer 1

无法执行多种类型，但您可以交换类型。基本思想如下

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" />