本篇内容主要讲解“如何利用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 ( <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); } } } }
到此,相信大家对“如何利用JavaScript实现一个输入框组件”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。