输入框

通过鼠标或键盘输入字符。

基本用法

一般情况下使用基础用法。

<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input">
</div>
<br><br>
<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input-basic">
</div>

禁用状态

输入框不可用状态。

<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input is-disabled" disabled>
</div>
<br><br>
<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input-basic is-disabled" disabled>
</div>

不同尺寸

输入框提供四种不同大小。

<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input woui-input-mini">
</div>
<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input-basic woui-input-mini">
</div>
<br><br>
<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input woui-input-small">
</div>
<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input-basic woui-input-small">
</div>
<br><br>
<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input">
</div>
<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input-basic">
</div>
<br><br>
<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input woui-input-large">
</div>
<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input-basic woui-input-large">
</div>

带icon的输入框

带有图标标记输入类型。

<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input woui-input-icon-right">
  <i class="woui-icon icon-info woui-input-right-icon"></i>
</div>
<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input-basic woui-input-icon-right">
  <i class="woui-icon icon-info woui-input-right-icon"></i>
</div>
<br><br>
<div class="woui-input-wrapper">
  <i class="woui-icon icon-info woui-input-left-icon"></i>
  <input type="text" placeholder="请输入内容" class="woui-input woui-input-icon-left">
</div>
<div class="woui-input-wrapper">
  <i class="woui-icon icon-info woui-input-left-icon"></i>
  <input type="text" placeholder="请输入内容" class="woui-input-basic woui-input-icon-left">
</div>

文本域

用于输入多行文本信息，通过将 type 属性的值指定为 textarea。

可自适应文本高度的文本域

通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 autosize 还可以设定为一个对象，指定最小行数和最大行数。

<div class="woui-input-textarea-wrapper">
  <textarea placeholder="请输入内容" class="woui-input-textarea" rows="1" id="textarea1"></textarea>
</div>
<button class="woui-btn" onclick="disable()">禁用</button>
<button class="woui-btn woui-btn-red" onclick="enable()">开启</button>
<button class="woui-btn woui-btn-red" onclick="clearText()">清除</button>
<br><br>
<div class="woui-input-textarea-wrapper">
  <textarea placeholder="请输入内容" class="woui-input-textarea" rows="2" id="textarea2"></textarea>
</div>
<button class="woui-btn" onclick="disable2()">禁用</button>
<button class="woui-btn woui-btn-red" onclick="enable2()">开启</button>
<button class="woui-btn woui-btn-red" onclick="clearText2()">清除</button>

var textarea = new woUI.Input({
  id: "#textarea1",
  type: 'textarea',
  autoSize: true
});
function disable() {
  textarea.disable();
}
function enable() {
  textarea.enable();
}
function clearText() {
  textarea.clear();
}
var textarea2 = new woUI.Input({
  id: "#textarea2",
  type: 'textarea',
  autoSize: true,
  minRow: 2
});
function disable2() {
  textarea2.disable();
}
function enable2() {
  textarea2.enable();
}
function clearText2() {
  textarea2.clear();
}

复合型输入框

可前置或后置元素，一般为标签或按钮。

Https://

.com

Https://

.com

<div class="woui-input-wrapper" style="width: 616px;">
  <div class="woui-input-group">
    <div class="woui-input-group-prepend">Https://</div>
    <input type="text" placeholder="请输入内容" class="woui-input woui-input-append">
  </div>
</div>
<br><br>
<div class="woui-input-wrapper" style="width: 616px;">
  <div class="woui-input-group">
    <div class="woui-input-group-prepend">Https://</div>
    <input type="text" placeholder="请输入内容" class="woui-input woui-input-inner">
    <div class="woui-input-group-append">.com</div>
  </div>
</div>
<br><br>
<div class="woui-input-wrapper" style="width: 616px;">
  <div class="woui-input-group">
    <div class="woui-input-group-prepend woui-input-group-label-mini">Https://</div>
    <input type="text" placeholder="请输入内容" class="woui-input woui-input-mini woui-input-inner">
    <div class="woui-input-group-append woui-input-group-label-mini">.com</div>
  </div>
</div>

输入框外部方法

输入框提供外部方法。

<div class="woui-input-wrapper">
  <input type="text" placeholder="请输入内容" class="woui-input" id="input1">
</div>
<button class="woui-btn" onclick="disable3()">禁用</button>
<button class="woui-btn woui-btn-red" onclick="enable3()">开启</button>
<button class="woui-btn woui-btn-red" onclick="clearText3()">清除</button>

var input1 = new woUI.Input({
  id: "#input1"
});
function disable3() {
  input1.disable();
}
function enable3() {
  input1.enable();
}
function clearText3() {
  input1.clear();
}

Options 参数

参数	说明	类型	可选值	默认值
id	绑定元素id (需支持queryselector)	string	-	`null`
type	类型	string	text / textarea	`text`
autoSize	自适应内容高度,只对 `type="textarea"` 有效	boolean	-	`true`
minRow	最小行数,只对 `type="textarea"` 有效	number	number/null	`1`
maxRow	最大行数,只对 `type="textarea"` 有效	number	number/nul	`null`
onChange	输入框变化回调函数	function	-	-
onFocus	获取焦点回调函数	function	-	-

输入框 API

初始化

new woUI.Input(option)

option: option参数参见表格。

启用输入框

Input.prototype.enable(callback)

callback: 可向方法内输送回调函数, 在动作结束后回调使用, 传入的callback必须是一个function

禁用输入框

Input.prototype.disable(callback)

callback: 可向方法内输送回调函数, 在动作结束后回调使用, 传入的callback必须是一个function

清空输入框

Input.prototype.clear(callback)

callback: 可向方法内输送回调函数, 在动作结束后回调使用, 传入的callback必须是一个function

输入框