如何利用JavaScript实现一个输入框组件

本篇内容主要讲解"如何利用JavaScript实现一个输入框组件"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"如何利用JavaScript实现一个输入框组件"吧!

背景

taro h6中想要实现一个样式如下的输入框：

问题：

taro组件和taro-ui组件中都没有这种样式的组件，taro h6 中还不支持修改placeholder的样式，自己尝试着实现一个input组件，更能灵活的定义其中的样式。

实现

js代码

import Taro, { Component } from '@tarojs/taro';import { View } from '@tarojs/components';import { AtIcon } from 'taro-ui';import './index.scss';/** * @description 手动实现一个输入框组件 * @param placeholder：String 自定义输入框中的占位符 * @param onClickSearch：Function 获取输入内容回调 */class BaseInput extends Component {  componentDidMount() {    //输入框聚焦    document.querySelector('.search').focus();  }  handleSearch = () => {    //获取输入框的内容    const value = document.querySelector('.search').innerText;    this.props.onClickSearch && this.props.onClickSearch(value);  };  render() {    const { placeholder = '请输入' } = this.props;    return (                                  {/* contenteditable可以控制一个div是否可以编辑 */}                            );  }}export default BaseInput;

scss代码

.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);      }    }  }}

到此，相信大家对"如何利用JavaScript实现一个输入框组件"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！