[英]How to position cursor in input field after icon
我有一個輸入字段,其中使用背景屬性定位了一個搜索圖標,每次我輸入它時,cursor 都會粘在開頭,如圖所示:
我怎樣才能在 position cursor 后搜索圖標? 我嘗試設置padding-left
和text-indent
但這也會移動占位符,這是不可取的。
這是我的輸入字段:
import React, { Component } from "react";
import Spinner from '../../components/Spinner/Spinner.jsx';
import { Link } from 'react-router-dom';
import axios from "axios";
class Search extends Component {
state = {
searchResults: [],
isLoading: false
}
getSearchQuery = (event) => {
const SEARCH_RESULTS_ENDPOINT = process.env.REACT_APP_SEARCH_ENDPOINT;
const queryString = document.querySelector(
".search-input"
).value;
if (event.keyCode === 13) {
this.setState({ ...this.state, isLoading: true });
axios.post(SEARCH_RESULTS_ENDPOINT, {
queryString: queryString,
}).then(response => {
this.setState({ ...this.state, searchResults: response.data });
this.setState({ ...this.state, isLoading: false });
});
}
};
render() {
if (this.state.isLoading) {
return <Spinner />
}
return (
<div>
<input
type="text"
placeholder="Search"
className="search-input"
onKeyDown={(e) => this.getSearchQuery(e)}
/>
<div>
{this.state.searchResults.map(result => (
<div key={result._id} >
<img src={result.picture} alt="avatar" />
<div >
<div>
<h2>{result.title}</h2>
<p>{result.date}</p>
<p>{result.postContent}</p>
<Link to={`/post/${result._id}`} className="read-more-btn">
<button className="read-more-btn">Read more</button>
</Link>
</div>
</div>
</div>
))}
</div>
</div>
);
}
}
export default Search;
這是我的 CSS:
.search-input {
background: url(../../assets/images/search-icon.png) no-repeat scroll 12px 12px;
background-size: 20px 20px;
margin: auto;
display: block;
width: 500px;
margin-top: 30px;
height: 40px;
border: solid 1px #AAAAAA;
// text-indent: 30px;
}
.search-icon {
height: 20px;
width: 20px;
}
.no-results-found {
text-align: center;
margin-top: 50px;
}
.search-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
padding-left:35px;
}
input:focus{
outline: none;
}
::-moz-placeholder { /* Firefox 19+ */
padding-left:20px;
}
:-ms-input-placeholder { /* IE 10+ */
padding-left:20px;
}
:-moz-placeholder { /* Firefox 18- */
padding-left:20px;
}
為搜索輸入添加一些padding
,因為它會填充那么多區域。
.search-input {
background: url(../../assets/images/search-icon.png) no-repeat scroll 12px 12px;
background-size: 20px 20px;
margin: auto;
display: block;
width: 500px;
margin-top: 30px;
height: 40px;
border: solid 1px #AAAAAA;
padding-left: 20px;
}
這就是我將如何做到的。
具有 2 個變體的示例
const { useState, useEffect } = React; const App = () => { return <div> <div className="container"> <span className="icon"> <i className="fas fa-search"></i> </span> <input className="input" type="Text" placeholder="Search"/> </div> <div className="container1"> <span className="icon1"> <i className="fas fa-search"></i> </span> <input className="input1" type="Text" placeholder="Search"/> </div> </div> } ReactDOM.render( <App />, document.getElementById('root') );
.container { border: 1px solid black; width: 300px; }.input { padding: .5rem.5rem.5rem 2rem; border: none; }.input:focus { outline: none; }.icon { position: absolute; margin-top: .5rem; margin-left: .5rem; }.container1 { margin-top: 1rem; border: 1px solid black; width: 300px; display: flex; }.icon1 { padding: .5rem 0.5rem.5rem; }.input1 { flex: 1 1 auto; padding: .5rem; border: none; }.input1:focus { outline: none; }
<script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js"></script> <div id="root"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.