JavaScript实现一个输入框组件

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

背景

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-09-10

Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件

带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值.这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以给可能存在的少数情况提供适配的可能. 本来想着这个组件比较常见应该已经有比较多现成的例子可以直接应用,但是搜索了一圈发现很多类似的组件都具备了太多的功能,例如搜索,多选等等 (简单说:太复杂了!).于是就想着还是自己动手写一个简单易用的,此处要感谢肥老板在我困惑时的鼎力相助. 这个 UI 元素将被用

js与jquery实时监听输入框值的oninput与onpropertychange方法

本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发

JS实现在网页中弹出一个输入框的方法

本文实例讲述了JS实现在网页中弹出一个输入框的方法.分享给大家供大家参考.具体分析如下: 习惯了使用早期给电脑文件夹设置密码的朋友一定还记得那种弹出一个输入框,然后让你输入密码在登录查看的效果吧,这个JS代码就是实现这个在当前页面中弹出一个输入框,当然你可以输入任何东西 <html> <head> <title>js输入对话框</title> </head> <body> <script language="javas

js监听input输入框值的实时变化实例

1.在元素上同时绑定 oninput 和onporpertychanger事件 例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo

JS 仿支付宝input文本输入框放大组件的实例

input输入的时候可以在后边显示数字放大镜 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS 仿支付宝input文本输入框放大组件</title> <script src="js/jquery.min.js"></script> <style>

js动态修改input输入框的type属性(实现方法解析)

需要实现的效果:一个输入框,当输入框未获得焦点的时候,value 值为 "密码":当输入框失去焦点的时候,输入内容显示为"*****" <input name="password" type="text" id="showPwd" tabindex="2″ class="input" value="密码" /> 我们很直接会想到下面的js $(&

Vue.js数字输入框组件使用方法详解

本文实例为大家分享了Vue.js数字输入框组件的具体实现代码,供大家参考,具体内容如下 效果 入口页 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

JavaScript组件开发之输入框加候选框

1.兼容ie8 主要是事件兼容 var EventUtil = { on:function(elem,type,handler){ if(elem.addEventListener){ elem.addEventListener(type,handler,false); }else if(elem.attachEvent){ elem.attachEvent("on"+type,handler); } }, getEvent:function(event){ return event|

JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数

第一: 限制只能是整数 <input type = "text" name= "number" id = 'number' onkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数');this.value='';}" /> 如果不是整数就直接alert 第二: 限制是两位的小数 <input type = "text" name= "price&quo

js监听输入框值的即时变化onpropertychange、oninput

要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的关联搜索效果等. 只要我们能捕获即时事件就能做到很多事情. 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获. onchange在属性值改变时还必须使得当前元

jquery 实时监听输入框值变化的完美方法(必看)

只需要同时绑定 oninput 和 onpropertychange 两个事件,但是这并不完美 $('.input-form :input').bind('input propertychange', function() { //获取.input-form下的所有 <input> 元素,并实时监听用户输入 //逻辑 }) 以上代码在因为用的bind,所以当遇到追加的新input标签时,则不能监听了. 如下情景: 由上图可以看到189和135号码是可以监听的,但是新追加的178和188则无效.

JS实现移动端实时监听输入框变化的实例代码

如果是在pc端,监听输入框你可能想到focus.blur.hover.onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异.那么怎么解决呢? 方案一 以前做一个简单的模糊搜索框的需求,大致思路是定义一个1s左右执行的定时器,定时器函数里面的逻辑是 判断文本框内容的长度,如果跟上一次长度有变化,就走一遍查询,如果没有变化不执行任何操作. 方案二 利用jquery提供的 input propertychange

zepto.js 实时监听输入框的方法

如下所示: $('#phone').on('input', function(e) { //实时监听手机号码输入框变化 if($('#phone').val()) { //输入框内容不为空 }else{ //输入框内容为空 } }) change事件是在失去焦点的时候生效的.使用input可以很简单的实现输入框的实时监听 以上这篇zepto.js 实时监听输入框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

微信小程序批量监听输入框对按钮样式进行控制的实现代码

在input组件上绑定data-model="xxx" bindinput="inputWatch",监听输入框输入: <input placeholder="请输入6~12位密码" name="password" value="{{password}}" data-model="password" bindinput="inputWacth" type=&qu

两种js监听滚轮事件的实现方法

前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = function() {//为了保证兼容性,这里取两个值,哪个有值取哪一个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发滚轮事件时滚轮的高度 } 二.Jquery通过$(

iOS中监听UITextField值改变事件的方法实例

前言 在实际情况中我们有时候在界面输入时候需要让用户输入的数据与模型同步,那么可能我们就需要监听UITextField值改变事件,然后在响应的方法中将新的值同步到模型中.这次我们主要提出三种方案,其中第一种方案是不一定有效的,后两种方案则是比较可靠的方案. 一.实现UITextFieldDelegate协议. 这种方式实际上是由系统空间回调协议中的方式,并且通过查阅文档我们可以发现有以下相关接口是相关的. - (BOOL)textFieldShouldBeginEditing:(UITextFi

js监听鼠标点击和键盘点击事件并自动跳转页面

js监听鼠标点击(onmousedown)和键盘点击(onkeydown)事件并自动跳转页面,在学习的朋友可以参考下 $(function(){ var i = 0; document.onmousedown=function(event){ if(i==1){ window.open('http://www.njxblog.com'); } //setTimeout(function (){window.open('http://www.jb51.net')},2000); //定时不太好使,