JavaScript implements an input box component

This article example shares the specific code for manually implementing an input box component for your reference. The specific content is as follows

background

In taro h5, I want to implement an input box with the following style:

question:

There is no component of this style in taro component and taro-ui component. Taro h5 does not support modifying the style of placeholder. I tried to implement an input component myself, which can define the style more flexibly.

accomplish

js code

import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { AtIcon } from 'taro-ui';

import './index.scss';

/**
 * @description Manually implement an input box component* @param placeholder: String Customize the placeholder in the input box* @param onClickSearch: Function Get input content callback*/
class BaseInput extends Component {
  componentDidMount() {
    //Input box focus document.querySelector('.search').focus();
  }

  handleSearch = () => {
    //Get the content 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 (
      <View className="base_input">
        <View className="my_search">
          <AtIcon
            value="search"
            color="#999"
            className="search_icon"
            onClick={this.handleSearch}
          />
          {/* contenteditable can control whether a div can be edited*/}
          <View
            className="search"
            contenteditable
            placeholder={placeholder}
          ></View>
        </View>
      </View>
    );
  }
}
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);
      }
    }
  }
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue.js Textbox with Dropdown component
Detailed explanation of how to use the Vue.js digital input box component
JS imitates Alipay input text input box enlargement component example
JavaScript component development: input box plus candidate box
JS uses regular expressions to restrict the input box to only allow integers and decimals (amounts or cash) with two decimal places
js and jquery real-time monitoring input box value oninput and onpropertychange methods
js monitors the instant changes of input box values onpropertychange, oninput
JS implements the method of popping up an input box on the web page
js dynamically modifies the type attribute of the input box (implementation method analysis)
js monitors the real-time changes of the input box value

<<: Method of realizing automated deployment based on Docker+Jenkins

>>: MySQL multi-table query detailed explanation