Skip to content

Latest commit

 

History

History
482 lines (344 loc) · 11.4 KB

xy-input.md

File metadata and controls

482 lines (344 loc) · 11.4 KB
Raw

xy-input

输入框。用于替代原生input。

使用方式

<!-- 引入 -->
<script type="module">
    import './node_modules/xy-ui/components/xy-input.js';
</script>
<!-- 使用 -->
<xy-input></xy-input>

初始值defaultvalue

设置或返回输入框的默认值。

<xy-input defaultvalue="XboxYan"></xy-input>

标签label

用来指定输入框的标记。

label属性提供了类似于Metiral Design的输入体验。

<xy-input label="user"></xy-input>

占位placeholder

与原生placeholder一致。当有label属性时无效。

<xy-input placeholder="user"></xy-input>

图标icon

可以设置一个icon来表示标签标识，设置后label失效。

<xy-input icon="user"></xy-input>

禁用disabled

通过disabled可以禁用输入框，禁用后该按钮上的事件失效。

<xy-input label="user" disabled></xy-input>

JavaScript操作get、set

input.disabled;//获取
input.disabled = false;
input.disabled = true;
//原生属性操作
input.getAttribute('disabled');
input.setAttribute('disabled','');
input.removeAttribute('disabled');

只读readonly

通过readonly让输入框只读。

<xy-input label="user" readonly defaultvalue="XboxYan"></xy-input>

JavaScript操作get、set

input.readonly;//获取
input.readonly = false;
input.readonly = true;
//原生属性操作
input.getAttribute('readonly');
input.setAttribute('readonly','');
input.removeAttribute('readonly');

块状block

block属性将使按钮适合其父宽度。

<xy-input label="user" block></xy-input>

值value

设置或返回输入框的value属性值。 该属性值在xy-input标签上不可见。

设置value为XboxYan 显示当前value

JavaScript操作get、set

input.value; //获取
input.value = 'name';
//原生属性操作
input.getAttribute('value');
input.setAttribute('value','name');

类型type

目前支持password、search、number这几种类型，设置后会出现额外的ui控件。

type=password

支持密码明文和密文切换。

<xy-input icon="lock" type="password"></xy-input>

type=search

右侧出现search图标，点击会执行onsubmit事件

<xy-input type="search" onsubmit="XyMessage.info(this.value)"></xy-input>

type=number

数字输入框，类似于原生input[type=number]，支持min、max、step属性，支持键盘上下键切换数字。

<xy-input icon="creditcard" type="number" min="-10" max="10" step="0.5" ></xy-input>

组合xy-input-group

<xy-input-group>可以将表单元素组合起来，包括xy-button、xy-input、xy-select。

http:// https:// go 
<xy-input-group>
    <xy-select defaultvalue="https://">
        <xy-option value="http://">http://</xy-option>
        <xy-option value="https://">https://</xy-option>
    </xy-select>
    <xy-input></xy-input>
    <xy-button type="primary">go</xy-button>
</xy-input-group>
武汉 上海 洪山区 江夏区 AAA BBB 
<xy-input-group>
    <xy-select defaultvalue="wuhan">
        <xy-option value="wuhan">武汉</xy-option>
        <xy-option value="shanghai">上海</xy-option>
    </xy-select>
    <xy-select defaultvalue="hongsan">
        <xy-option value="hongsan">洪山区</xy-option>
        <xy-option value="jiangxia">江夏区</xy-option>
    </xy-select>
    <xy-select defaultvalue="AAA">
        <xy-option value="AAA">AAA</xy-option>
        <xy-option value="BBB">BBB</xy-option>
    </xy-select>
</xy-input-group>

纯CSS布局实现。

验证checkValidity

支持正则校验，如果不满足要求，则会出现错误提示。

1.内置的表单验证

必填项required

<xy-input icon="user" required placeholder="required"></xy-input>

最小长度minlength、最大长度minlength

<xy-input icon="user" placeholder="user" minlength="6" maxlength="10"></xy-input>

邮箱email

设置type='email'可以对邮箱格式进行校验。

<xy-input icon="mail" type="email" placeholder="email"></xy-input>

这是原生支持的类型，如果不满足可以采用下面更为通用的正则校验。

2.正则pattern

设置pattern属性，这是一个正则。

<xy-input icon="phone" pattern="^1(3|4|5|6|7|8|9)\d{9}$" placeholder="请输入手机号"></xy-input>

默认提示信息可能不人性化，可以自定义提示信息errortips

<xy-input icon="phone" pattern="^1(3|4|5|6|7|8|9)\d{9}$" placeholder="请输入手机号" errortips="手机号格式有误"></xy-input>

可以设置提示信息的位置，默认为top，参考xy-tips。

<xy-input icon="mail" type="email" placeholder="email" errordir="right"></xy-input>

3.自定义验证

上面的校验均针对输入格式，如果需要对值进行校验，可使用customValidity，比如校验重复密码

<xy-form>
    <xy-form-item legend="password">
        <xy-input name="password" id="pwd" required type="password" placeholder="password" minlength="6"></xy-input>
    </xy-form-item>
    <xy-form-item legend="password again">
        <xy-input name="password_confirm" id="pwdAgain" required type="password" placeholder="password confirm"></xy-input>
    </xy-form-item>
<xy-form>

自定义格式如下

pwdAgain.customValidity = {
    method:(el)=>{
        return el.value == pwd.value;//校验规则
    },
    tips:'前后密码不一致'//错误提示
}

4.忽略验证novalidate

如果使用该属性，则输入时不进行验证。

<xy-input icon="user" novalidate placeholder="user" minlength="6" maxlength="10"></xy-input>

合法性validity

可以通过属性validity来获取输入框内容的合法性。

合法性

JavaScript操作get

input.validity;//获取

事件event

该组件暴露了常见的回调事件。

onchange

当输入框文本改变的时候触发（失焦后）。

<xy-input onchange="fn(event)"></xy-input>
input.onchange = function(ev){
    //获取value的几种方式
    /*
    event:{
        detail:{
            value,
        }
    }
    */
    console.log(this.value);
    console.log(ev.target.value);
    console.log(ev.detail.value);
}

input.addEventListener('change',function(ev){
    console.log(this.value);
    console.log(ev.target.value);
    console.log(ev.detail.value);
})

oninput

当输入框在输入时触发。

<xy-input oninput="fn(event)"></xy-input>
input.oninput = function(ev){
    //获取value的几种方式
    /*
    event:{
        detail:{
            value,
        }
    }
    */
    console.log(this.value);
    console.log(ev.target.value);
    console.log(ev.detail.value);
}

input.addEventListener('input',function(ev){
    console.log(this.value);
    console.log(ev.target.value);
    console.log(ev.detail.value);
})

通常，配合debounce可以设置防抖，比如debounce="300"表示在300ms内无操作才会触发。

<xy-input debounce="300" oninput="fn(event)"></xy-input>

onsubmit

当聚焦时，按回车键Enter触发。

<xy-input onsubmit="fn(event)"></xy-input>
input.onsubmit = function(ev){
    //获取value的几种方式
    /*
    event:{
        detail:{
            value,
        }
    }
    */
    console.log(this.value);
    console.log(ev.target.value);
    console.log(ev.detail.value);
}

input.addEventListener('submit',function(ev){
    console.log(this.value);
    console.log(ev.target.value);
    console.log(ev.detail.value);
})

onfocus、onblur

focus、blur后的回调事件。

与xy-button使用方式一致。

方法function

focus

用于主动聚焦focus。

主动聚焦

input.focus();

其他事件均与原生相同，比如ondrop、onpaste

checkValidity

用于主动校验，弹出提示信息。

主动校验

input.checkValidity();