# MInput 输入框

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/input/freepass)
- 平台：移动端
- 维护者：揭志胜
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MInput]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React, { ReactElement, ReactText } from 'react'
import { MInput, constantsM, Icon, Input } from '@weapp/ui'
const prefixCls = `${constantsM.uiMClsPrefix}-demo-input`

export default class BasicInputExample extends React.PureComponent<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {
      value: '默认数据',
    }
  }

  handleChange = (v: ReactText) => this.setState({ value: v })

  customReadOnlyContentRender = (v: ReactElement) => {
    return (
      <div>
        {v}
        新复写的内容
      </div>
    )
  }
  render() {
    const { value } = this.state
    return (
      <div className={prefixCls}>
        <h2>MInput 单行文本</h2>
        <h3>基本使用</h3>
        <MInput
         
          placeholder='basic input'
        />

        <h3>显示语音转文字按钮（仅 em 生效）</h3>
        <MInput
         
          placeholder='可手机端使用语音功能'
          showVoiceToTextBtn
        />

        <h3>受控(未注册onChange事件,无法更改值)</h3>
        <MInput
         
          placeholder='basic input'
          value={value}
        />

        <h3>受控(注册onChange事件)</h3>
        <MInput
         
          placeholder='basic input'
          value={value}
          onChange={this.handleChange}
        />

        <h3>密码框</h3>
        <MInput
         
          placeholder='basic input'
          type={'password'}
        />
        <h3>密码框（带切换按钮）</h3>
        <MInput
         
          placeholder='basic input'
          type={'password'}
          showPasswordToggleBtn={true}
        />

        <h3>带前缀(prefix)</h3>
        <MInput
         
          placeholder='basic input'
          prefix='标题'
        />

        <h3>带前缀/后缀(prepend/append) </h3>
        <MInput
         
          placeholder='basic input'
          prepend="https://"
          append=".com.cn"
        />
        <h3>带前缀/后缀(prepend/append) - 边框模式 </h3>
        <MInput
         
          placeholder='basic input'
          prepend="https://"
          append=".com.cn"
          showBorder={true}
        />
        <h3>设置最大长度(maxLength)</h3>
        <MInput
         
          placeholder='basic input'
          maxLength={10}
          showCount={true}
        />

        <h3>只读 / 禁用(readOnly / disabled)</h3>
        <MInput
         
          value='not editable'
          prefix='姓名'
          readOnly
        />
        <MInput
         
          value='style of disabled `MInput`'
          prefix='姓名'
          disabled
        />

        <h3>只读(自定义渲染只读内容)</h3>
        <MInput
         
          value='not editable'
          prefix='姓名'
          readOnly
          customReadOnlyContentRender={this.customReadOnlyContentRender}
        />

        <h3>只读,文本超出换行(selectedWrap)</h3>
        <MInput
         
          value='not editable sad ewqe da eq fkalf sdjk sdk3 opeopw 3iop wewqipo dasd 3ifso wmlw weoq top4ut'
          readOnly
          selectedWrap
        />

        <h3>只读 (表单特殊样式)</h3>
        <MInput
         
          value='not editable sad ewqe da eq fkalf sdjk sdk3 opeopw 3iop wewqipo dasd 3ifso wmlw weoq top4ut'
          // prefix='姓名'
          readOnly
          inForm
          readOnlyLineHeightStandard
        />

        <h3>只读（无数据，显示 placeholder）</h3>
        <MInput
         
          readOnly
          placeholder={'请输入'}
          readOnlyShowPlaceholder
        />

        <h3>只读（纯文本模式）</h3>
        <h4>prefix / suffix</h4>
        <MInput selectedWrap prefix='wwww.' suffix='.com' readOnly defaultValue="As we look to the future, the potential of AI seems almost limitless. With continued research and development, we can expect to see even more advanced AI systems that will transform our lives in ways we can only begin to imagine." readOnlyDisplayType='text' />
        <h4>prefix / suffix - inForm</h4>
        <MInput inForm readOnlyLineHeightStandard prefix='wwww.' suffix='.com' readOnly defaultValue="As we look to the future, the potential of AI seems almost limitless. With continued research and development, we can expect to see even more advanced AI systems that will transform our lives in ways we can only begin to imagine." readOnlyDisplayType='text' />
        <h4>prepend / append</h4>
        <MInput selectedWrap prepend='https:' append='.com' readOnly defaultValue="As we look to the future, the potential of AI seems almost limitless. With continued research and development, we can expect to see even more advanced AI systems that will transform our lives in ways we can only begin to imagine." readOnlyDisplayType='text' />
        <h4>prepend / append - inForm</h4>
        <MInput inForm readOnlyLineHeightStandard prepend='https:' append='.com' readOnly defaultValue="As we look to the future, the potential of AI seems almost limitless. With continued research and development, we can expect to see even more advanced AI systems that will transform our lives in ways we can only begin to imagine." readOnlyDisplayType='text' />

        <h3>失去焦点后去除内容前后空格(autoTrim,非受控)</h3>
        <MInput
         
          prefix='标题'
          placeholder='basic input'
          autoTrim
        />

        <h3>失去焦点后去除内容前后空格(autoTrim,受控)</h3>
        <MInput
         
          prefix='标题'
          autoTrim
          value={value}
          onChange={this.handleChange}
        />

        <h3> readonly只读模式下,设置placeholder,实际显示为空</h3>
        <MInput
         
          prefix='姓名'
          placeholder='placehoder的内容'
          readOnly
        />

        <h3>可清除(allowClear)</h3>
        <MInput
         
          allowClear
          showVoiceToTextBtn // 显示语音转文字按钮（仅 em 生效）
          prefix='标题'
          placeholder='displayed clear while typing'
        />

        <h3>标题长度超过5个(默认效果，溢出打点)</h3>
        <MInput
         
          prefix='标题过长超过默认的5个字'
          placeholder='limited title length'
        />

        <h3>自定义标题,个性化设置prefix(text / image / empty)</h3>
        <MInput
         
          placeholder='text'
          prefix='文本前缀'
        />
        <MInput
         
          prefix={
            <Icon
             
              name='Icon-personnel'
              style={{
                color: 'var(--primary)',
                width: 'calc(var(--hd) * 22)',
                height: 'calc(var(--hd) * 22)',
              }}
            />
          }
          placeholder='title can be icon，image or text'
        />

      </div>
    )
  }
}
```

### 格式化

格式化

```jsx
import React from 'react';
import { MInput, constantsM } from '@weapp/ui';
const prefixCls = `${constantsM.uiMClsPrefix}-demo-input`;

export default class BasicInputExample extends React.PureComponent {
  render() {
    return (
      <div className={prefixCls}>
        <h2>MInput 单行文本</h2>
        <h3>格式化</h3>
        <MInput
          type="bankCard"
          prefix="银行卡"
        />
        <MInput
          type="phone"
          prefix="手机号码"
          placeholder="186 1234 1234"
        />
        <MInput
          type="password"
          prefix="密码"
          placeholder="****"
        />
        <MInput
          type="number"
          prefix="数字"
          placeholder="click to show number keyboard"
        />
        <MInput
          type="digit"
          prefix="小数"
          placeholder="click to show native number keyboard"
        />

        <h3>金钱</h3>
        <MInput
          type={'money'}
          defaultValue={'100'}
          placeholder="start from left"
          prefix="光标在左"
          allowClear
          moneyKeyboardAlign="left"
        />
        <MInput
          type={'money'}
          placeholder="start from right"
          prefix="光标在右"
          allowClear
          onChange={console.log}
          onBlur={console.log}
        />
        <MInput
          type={'money'}
          placeholder="money format"
          prefix="数字键盘"
          onVirtualKeyboardConfirm={console.log}
          allowClear
        />
      </div>
    );
  }
}
```

### MTextarea

多行文本

```jsx
import React from 'react';
import { MTextarea, MButton } from '@weapp/ui';

type InputRefType = HTMLTextAreaElement | null | undefined;

export default class BasicInputExample extends React.Component<any,any>{
  inputRef: InputRefType;
  autoFocusInst: InputRefType;
  labelFocusInst: InputRefType;
  state = {
    readonly: true,
  }
  handleClick = () => {
    this.inputRef && this.inputRef.focus();
  }

  changeReadonly = ()=> {
    this.setState({ readonly: !this.state.readonly });
  }
  render() {
    const { readonly } = this.state;
    return (
      <div>
        <h2>MTextarea 多行文本</h2>
        <h3>基本使用</h3>
        <MTextarea
          title="标题"
          placeholder="basic textarea"
          data-seed="logId"
          autoHeight
          onChange={console.log}
        />
        <h3>Whether is controlled</h3>
        <MTextarea
          title="受控组件"
          placeholder="controlled"
        />
        <MTextarea
          title="非受控组件"
          placeholder="please input content"
          allowClear
        />
        <h3>Auto / Fixed height</h3>
        <MTextarea
          title="高度自适应"
          autoHeight
          labelNumber={5}
        />
        <MTextarea
          rows={3}
          placeholder="fixed number of lines"
        />
        <h3>Show clear</h3>
        <MTextarea
          allowClear
          title="标题"
          placeholder="displayed clear while typing"
          showVoiceToTextBtn // 显示语音转文字按钮（仅 em 生效）
        />
        <h3>Custom title（text / image / empty）</h3>
        <MTextarea
          title={<img src="https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png" style={{ width: '28px', height: '28px' }} alt="" />}
          placeholder="title can be customized"
        />
        <h3>Limited value length</h3>
        <MTextarea
          placeholder="can enter up to 10 characters"
          maxLength={10}
        />
        <h3>maxLength</h3>
        <MTextarea
          rows={5}
          maxLength={100}
          showCount
          showVoiceToTextBtn // 显示语音转文字按钮（仅 em 生效）
        />
        <h3>Not editable / Disabled</h3>
        <MTextarea
          title="姓名"
          value="readonly style"
          readOnly
        />
        <MTextarea
          value="disabled style"
          title="姓名"
          disabled
        />

        <h3>只读(表单特殊样式-无标题)</h3>
        <MTextarea
          value="readonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly style"
          readOnly
          inForm
          readOnlyLineHeightStandard
        />

        <h3>只读(无数据，显示 placeholder)</h3>
        <MTextarea
         
          placeholder={'readOnly but show placeholder'}
          readOnly={true}
          readOnlyShowPlaceholder
        />
        <h3>只读(表单特殊样式)</h3>
        <MTextarea
          title="姓名"
          value="readonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly style"
          readOnly
          inForm
          readOnlyLineHeightStandard
        />

        <h3>只读样式下外层设置对应字体颜色</h3>
        <div style={{ color: 'red'}}>
          <h4>文本内容</h4>
          <MTextarea
            title="姓名"
            value="readonly style"
            readOnly
          />
        </div>

        <h3>只读样式多字体,自动计算文本高度</h3>
        <MButton onClick={this.changeReadonly}>切换只读效果</MButton>
        <div style={{ color: 'red'}}>
          <h4>文本内容</h4>
          <MTextarea
            title="姓名"
            value="readonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly stylereadonly style"
            readOnly={readonly}
            autoHeight
          />
        </div>
      </div>
    );
  }
}
```

### MInputNumber

移动端

```jsx
import React, { Component, ReactText } from 'react';
import { constants, MInput } from '@weapp/ui';

const { MInputNumber } = MInput;

const prefixCls = `${constants.uiPcClsPrefix}-demo-input`;

type InputDemoState = {
  value: string | number;
  visible: boolean;
}

class InputNumberDemo extends Component<any, InputDemoState> {
  constructor(props: any) {
    super(props);
    this.state = {
      value: null as any,
      visible: false,
    };
  }

  handleChange = (v: ReactText) => this.setState({ value: v });

  render() {
    const { value } = this.state;
    return (
      <div className={prefixCls}>
        <h3>基本使用</h3>
        <MInputNumber placeholder="请输入" precision={0} />
        <h3>只读状态</h3>
        <MInputNumber placeholder="请输入" value="3" readOnly />
        <h3>只读状态(表单特殊样式)</h3>
        <MInputNumber placeholder="请输入" value="3" readOnly  inForm readOnlyLineHeightStandard/>
        <h3>只读状态(无数据，展示 placeholder)</h3>
        <MInputNumber placeholder="请输入" readOnly readOnlyShowPlaceholder/>
        <h3>禁用状态</h3>
        <MInputNumber placeholder="请输入" value="3" disabled />
        <h4>数据受控</h4>
        <MInputNumber placeholder="请输入" min={0} max={10} value={value} onChange={this.handleChange} />
        <h4>递增递减步数0.1</h4>
        <MInputNumber placeholder="请输入" min={-1.1} max={7.2} defaultValue={0.1} step={0.1} allowClear />
        <h4>精度和分隔符</h4>
        <MInputNumber placeholder="请输入" defaultValue={100000} hasSeparator precision={3} allowClear />
        <h4>精度(特殊情况,precision为0时)</h4>
        <MInputNumber placeholder="请输入" defaultValue={22.312321} precision={0} allowClear />
        <h4>显示两端的按钮</h4>
        <MInputNumber placeholder="请输入" hideOps={false} min={-3} max={10} />
        <h4>最大长度6位</h4>
        <MInputNumber placeholder="请输入" maxLength={6} />
      </div>
    );
  }
}

export default InputNumberDemo;
```

### input支持placeholder支持滚动

设置【focusAutoScroll】参数开启placeholder内容滚动

```jsx
import React, { ReactText } from 'react';
import { MInput, constantsM, Icon } from '@weapp/ui';
const prefixCls = `${constantsM.uiMClsPrefix}-demo-input`;

export default class BasicInputExample extends React.PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      value: '默认数据',
    };
  }

  handleChange = (v: ReactText) => this.setState({ value: v });
  render() {
    const { value } = this.state;
    return (
      <div className={prefixCls}>
        <h2>MInput 单行文本</h2>
        <h3>基本使用,聚焦后显示滚动-focusAutoScroll</h3>
        <MInput
         
          onChange={this.handleChange}
          placeholder="请输入内容请输入内容请输入内容请输入内容请输入内容请输入内容请输入内容"
          focusAutoScroll
        />

        <h3>基本使用,提示内容不超长情况下</h3>
        <MInput
         
          onChange={this.handleChange}
          placeholder="请输入内容"
          focusAutoScroll
        />

        <h3>带前缀(prefix)</h3>
        <MInput
         
          placeholder="请输入内容请输入内容请输入内容请输入内容请输入内容请输入内容请输入内容"
          prefix="标题"
          focusAutoScroll
        />

        <h4>基础用法-未开启</h4>
        <MInput
         
          onChange={this.handleChange}
          placeholder="请输入内容请输入内容请输入内容请输入内容请输入内容请输入内容请输入内容"
        />
      </div>
    );
  }
}
```

### 只读模式下解析超链接

readonlyTransLink开启只读模式下解析超链接, 使用readonlyUrlRegex修改对应匹配规则

```jsx
import React, { ReactText } from 'react';
import { MInput, constantsM, MTextarea } from '@weapp/ui';

const prefixCls = `${constantsM.uiMClsPrefix}-demo-input`;

export default class BasicInputExample extends React.PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      value: '默认数据 https://weapp.eteams.cn/ 地址链接',
      textareaValue: '默认数据 https://weapp.eteams.cn/ 地址链接',
      reg: '',
    };
  }

  handleRegChange = (v: ReactText) => this.setState({ reg: v });

  handleChange = (v: ReactText) => this.setState({ value: v });

  handleTextareaChange = (v: ReactText) => this.setState({ textareaValue: v });

  render() {
    const { value, textareaValue, reg } = this.state;
    return (
      <div className={prefixCls}>
        <h2>MInput 单行文本</h2>
        <h3>基本使用</h3>
        <MInput value={value} onChange={this.handleChange} />
        <h3>只读-默认效果</h3>
        <MInput value={value} readOnly />
        <h3>只读-链接转换(readonlyTransLink)</h3>
        <MInput value={value} readOnly readonlyTransLink />

        <h3>修改匹配规则</h3>
        <MInput value={reg} onChange={this.handleRegChange} />
        <h3>只读-匹配规则修改</h3>
        <MInput
         
          value={value}
          readOnly
          readonlyTransLink
          readonlyUrlRegex={reg}
        />

        <h2>MTextarea 多行文本</h2>
        <h3>基本使用</h3>
        <MTextarea
         
          title="标题"
          value={textareaValue}
          onChange={this.handleTextareaChange}
        />

        <h3>只读-默认效果</h3>
        <MTextarea title="姓名" value={textareaValue} readOnly />

        <h3>只读-解析超链接</h3>
        <MTextarea
         
          title="姓名"
          value={textareaValue}
          readOnly
          readonlyTransLink
        />

        <h3>只读-匹配规则修改</h3>
        <MTextarea
         
          title="姓名"
          value={textareaValue}
          readOnly
          readonlyTransLink
          readonlyUrlRegex={reg}
        />
      </div>
    );
  }
}
```

## API

### MInput 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| autoTrim | 失去焦点时是否去除前后空格 | boolean | F | false |
| disabled | 是否禁用 | boolean | F | false |
| value | 值 | string,number | F | - |
| inputClassName | input class | string | 否 | - |
| defaultValue | 默认值 | string,number | F | - |
| maxLength | 长度的限制, 限制输入 | number | F | - |
| stringLength | 长度的限制, 限制输入。 一个中文按照 3 个字符计算 | number | F | - |
| type | Input 类型 | `text` \| `bankCard` \| `phone` \| `password` \| `number` \| `digit` \| `money` | F | `text` |
| prefixListCls | 内部样式类名 | string | F | `ui-m-list` |
| outStyle | 外层包裹标签的样式 | CSSProperties | F | {} |
| moneyKeyboardAlign | type=`money`的时候对齐方式 | string | F | `right` |
| moneyKeyboardWrapProps | type=`money`的时候 wrap 标签属性 | object | F | {} |
| allowClear | 可清空 | boolean | F | - |
| prefix | 带有前缀图标的 input | ReactNode | F | - |
| suffix | 带有后缀图标的 input | ReactNode | F | - |
| readonlyTransLink | 只读情况下支持解析链接并支持跳转 | boolean | F | false |
| readonlyUrlRegex | 只读情况下修改链接的正则匹配规则 | string | F | '' |
| readOnlyShowPlaceholder | 只读情况下无数据，展示 placeholder | boolean | F | false |
| inputReadOnly | inputReadOnly, 作用于 input 标签 | boolean | F | - |
| showVoiceToTextBtn | 是否显示语音转文字按钮（仅 em 生效） | boolean | F | false |
| onVirtualKeyboardConfirm | 虚拟键盘确认回调 | (value: MValueType) => void | F | noop() { } |
| onPressEnter | 点击回车触发回调事件 | (value: ValueType, e: KeyboardEvent) => void | F | - |
| onBlur | input 失焦回调 | (value: ValueType, e: FocusEvent) => void | F | - |
| onFocus | input 聚焦回调 | (value: ValueType, e: FocusEvent) => void | F | - |
| onChange | 输入值内容发生变化触发的回调事件 | (value: ValueType, e: any) => void | F | - |
| onClear | input 清除回调 | (value: ValueType, e: ChangeEvent) => void | 否 | - |
| customReadOnlyContentRender | 自定义只读内容渲染 | (ele: ReactNode) => ReactNode | 否 |  |
| onBeforeFocusCheck | input 聚焦回调，在 onFocus 前触发，接收 onFoucs 事件 可用于拦截 onFocus 事件） | (onFocus?: (() => void)) => void | F | - |
| prepend | 前缀（与 prefix 在 dom 层级上有区别，是 border 模式下自带背景色） | React.ReactNode | F | - |
| append | 后缀（与 prefix 在 dom 层级上有区别，是 border 模式下自带背景色） | React.ReactNode | F | - |
| showBorder | 边框模式 | boolean | F | - |
| showCount | 展示计数器 | boolean | F | - |
| readOnlyDisplayType | 只读展示效果(text: 前缀/后缀移除样式，与内容修改为行内元素) | 'normal' \| 'text' | - | - |
| showPasswordToggleBtn | 是否显示密码切换按钮 | boolean | - | false |
### MTextarea 参数说明如下

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 值 | string | F | - |
| title | 标题 | React.ReactNode | F | - |
| defaultValue | 默认值 | string | F | - |
| rows | 内部属性 | number | F | 1 |
| count | 总数 | number | F | - |
| labelNumber | 内部控制 label 样式名属性 | number | F | 5 |
| escape | 转码 | boolean | F | - |
| enableEmoji | 是否使用 emoji 表情 | boolean | F | false |
| autoHeight | 自适应高度 | boolean | 否 | false |
| prefixListCls | 内部样式类名 | string | string | - |
| outStyle | 外层包裹标签的样式 | CSSProperties | F | {} |
| maxLength | 长度的限制, 限制输入 | number | F | - |
| stringLength | 长度的限制, 限制输入。 一个中文按照 3 个字符计算 | number | F | - |
| allowClear | 可清空 | boolean | F | - |
| showVoiceToTextBtn | 是否显示语音转文字按钮（仅 em 生效） | boolean | F | false |
| onClear | input 清除回调 | (value: ValueType, e: ChangeEvent) => void | 否 | - |
| onBlur | textarea 失焦回调 | (value: ValueType, e: FocusEvent) => void | F | - |
| onFocus | textarea 聚焦回调 | (value: ValueType, e: FocusEvent) => void | F | - |
| onChange | 输入值内容发生变化触发的回调事件 | (value: ValueType, e: any) => void | F | - |
## 子组件

### MInput.MInputNumber

#### MInputNumber 参数说明如下

子组件MInputNumber的参数继承自基础Input组件InputProps

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 值 | string,number | F | - |
| align | 按钮对齐方式 | 'left','right','normal' | F | - |
| min | 最小值 | number | F | - |
| max | 最大值 默认 15 位正负 js 限制 | number | F | - |
| defaultValue | 默认值 | string,number | F | - |
| step | 间隔大小 | number | F | - |
| hideOps | 隐藏加减按钮 | boolean | F | - |
| precision | 数据精度 | number | F | - |
| hasSeparator | 是否显示千分位分隔符 | boolean | F | - |
| onChange | 值变化 | (v: string \| number, e: ChangeEvent) => void | F | - |
| onFocus | 获取焦点 | (v: string \| number, e: FocusEvent) => void | F | - |
| onBlur | 失去焦点 | (v: string \| number, e: FocusEvent) => void | F | - |
### Tip

> input 自动填充以默认关闭，默认如有需要，通过 autoComplete（input 原生属性） 自行开启
