如何用JavaScript编写一个输入框组件代码？

本文共计498个文字，预计阅读时间需要2分钟。

原文示例：本文实例为大家庭分享了手动实现一个输入框组件的具体代码，供大家参考。整体内容如下：背景+taro+h5中想要实现一个样式如下的输入框：问题：taro组件和taro-ui组件中都没有这种样式的‘输入框’。

改写后的内容：本文以实例形式展示如何手动创建一个输入框组件，并提供了相关代码供参考。具体内容涵盖：背景、taro与h5环境、所需实现的输入框样式。遇到的问题：在taro和taro-ui组件库中均未找到此类样式的输入框。

本文实例为大家分享了手动实现一个输入框组件的具体代码，供大家参考，具体内容如下

背景

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。