Shulou(Shulou.com)06/03 Report--

This article focuses on "how to use JavaScript to achieve an input box component", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to use JavaScript to achieve an input box component"!

Background

In taro H6, you want to implement an input box with the following style:

Question:

Taro components and taro-ui components do not have this style of components, taro H6 does not support modifying the style of placeholder, I try to implement an input component, which can be more flexible to define the style.

Realize

Js code

Import Taro, {Component} from'@ tarojs/taro';import {View} from'@ tarojs/components';import {AtIcon} from 'taro-ui';import'. / index.scss' / * * @ description manually implements an input box component * @ param placeholder:String the placeholder * @ param onClickSearch:Function in the custom input box gets the input callback * / class BaseInput extends Component {componentDidMount () {/ / the input box focuses on document.querySelector ('.search'). Focus ();} handleSearch = () = > {/ / get the contents of the input box const value = document.querySelector ('.search'). InnerText This.props.onClickSearch & & this.props.onClickSearch (value);}; render () {const {placeholder = 'Please enter'} = this.props; return ({/ * contenteditable can control whether a div can be edited * /});} export default BaseInput

Scss code

.base _ input {.my _ search {box-sizing: border-box; width: 690px; height: 56px; line-height: 56px; border-radius: 28px; margin: 12px auto; background: # f8f8f8; display: flex; .search _ icon {width: 30px; height: 30px; margin-left: 20px; margin-right: 18px;} .search {width: 560px; padding: 0px 18px Background: # f8f8f8; height: 56px; color: # 999; font-size: 28px; font-weight: 400; &: empty::after {content: attr (placeholder);} so far, I believe you have a deeper understanding of "how to use JavaScript to achieve an input box component". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.