纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

js输入框组件 JavaScript实现一个输入框组件

Aaron_1127   2021-09-12 我要评论
想了解JavaScript实现一个输入框组件的相关内容吗,Aaron_1127在本文为您仔细讲解js输入框组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js输入框组件,js输入组件,js输入框,下面大家一起来学习吧。

背景

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

问题:

taro组件和taro-ui组件中都没有这种样式的组件,taro h5 中还不支持修改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 (
      <View className="base_input">
        <View className="my_search">
          <AtIcon
            value="search"
            color="#999"
            className="search_icon"
            onClick={this.handleSearch}
          />
          {/* contenteditable可以控制一个div是否可以编辑 */}
          <View
            className="search"
            contenteditable
            placeholder={placeholder}
          ></View>
        </View>
      </View>
    );
  }
}
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);
      }
    }
  }
}

相关文章

猜您喜欢

  • Java面试题 Java面试题冲刺第二十九天--JVM3

    想了解Java面试题冲刺第二十九天--JVM3的相关内容吗,_陈哈哈在本文为您仔细讲解Java面试题的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Java面试题,JavaJVM,下面大家一起来学习吧。..
  • js网页播放器 JavaScript实现网页播放器

    想了解JavaScript实现网页播放器的相关内容吗,信仰柴神的人在本文为您仔细讲解js网页播放器的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js,播放器,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.ben10gamesx.com 【Win11软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式