【input】输入框组件说明

input输入框组件

原型:

<input
    value="[String]"
    type="[text | number | idcard | digit]"
    password="[Boolean]"
    placeholder="[String]"
    placeholder-style="[String]"
    placeholder-class="[String]"
    disabled="[Boolean]"
    maxlength="[Number]"
    cursor-spacing="[Number | String]"
    focus="[Boolean]"
    confirm-type="[done | send | search | next | go ]"
    confirm-hold="[Boolean]"
    cursor="[Number]"
    selection-start="[Number]"
    selection-end="[Number]"
    adjust-position="[Boolean]"
    bindinput="[EventHandle]"
    bindfocus="[EventHandle]"
    bindblur="[EventHandle]"
    bindconfirm="[EventHandle]"

>
</input>

属性:

名称 是否必需 类型 默认值 说明
value [String]   输入框的初始内容
type [text | number | idcard | digit] text
输入框输入键盘类型

text  文本输入键盘

number 数字输入键盘

idcard 身份证输入键盘

digit 带小数点的数字键盘

password [Boolean] false 是否是密码类型
placeholder [String]   输入框为空时占位符
placeholder-style [String]   指定 placeholder 的样式
placeholder-class [String] input-placeholder 指定 placeholder 的样式类
disabled [Boolean] false 是否禁用
maxlength [Number] 140 最大输入长度(设置为-1时不限制最大长度)
cursor-spacing [Number | String] 0 指定光标与键盘的距离,单位px或rpx,默认为px。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
         
         
         
         
         
         
         
         
         
         

原文地址:https://www.cnblogs.com/wm218/p/9930070.html

时间: 2024-11-15 00:31:50

【input】输入框组件说明的相关文章

微信小程序组件解读和分析:十、input输入框

input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 <view class="content"> type:有效值:text 感觉没什么区别 <input  placeholder="type=text" type=

第二百一十三节,jQuery EasyUI,NumberBox(数值输入框)组件

jQuery EasyUI,NumberBox(数值输入框)组件 功能:只能输入数值,和各种数值的计算 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 NumberBox(数值输入框)组件的使用方法,这个组件依赖 于 ValidateBox(验证框)组件. 一.加载方式 class 加载方式 <input type="text" class="easyui-numberbox" value="10

NumberBox( 数值输入框) 组件

本节课重点了解 EasyUI 中 NumberBox(数值输入框)组件的使用方法,这个组件依赖于 ValidateBox(验证框)组件.一. 加载方式//class 加载方式<input type="text" class="easyui-numberbox" value="100"data-options="min:0,precision:2">//JS 加载调用$('#box').numberbox({min

DateBox( 日期输入框) 组件

本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使用方法,这个组件依赖于 Combo(自定义下拉框)和 Calendar(日历). 一. 加载方式//class 加载方式<input id="box" type="text" class="easyui-datebox"required="required">//JS 加载调用$('#box').datebox({}); 二. 属性列表 //属性

input输入框只能输入正整数

input输入框加入限制只能输入正整数,输入其他字符会自动清除: <input type="text" value="1" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.le

基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(docum

去除Input输入框中边框的方式

我们在做制作注册页面时,经常会需要消除Input带来的边框,这时候我们需要用到两个属性 一个是input在非激活状态下,不现实边框,代码规则为 border:none:同时当鼠标移到input输入框上时,需要用 outline:medium;来消除边框,具体代码如下 .table_box2{ height: 30px; width: 180px; border: none; float: left; zoom:1; outline: medium; 需特别注意点一点,在这里尽量不要使用borde

input输入框实现联想关键词功能

实现原理很简单,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>input输入框实现联想关键词功能</title> <script src="http://www.kiscms.com/static/jquery-3.1.1.min.js"></script> </head>

angular input输入框中使用filter格式化日期

最近使用了angular日期选择器,不过需要把选中的日期输出到input输入框中,如果按照默认情况,显示的是时间戳形式的时间,不符合要求,需要把格式变成特定格式,但是input上ng-model上又不能直接使用filter,因此需要一种方法把这里显示的内容格式化. 网上寻找解决方案就是写个directive,具体实例代码如下: JS angular.module('dateRange',[]).directive('dateFormat', ['$filter',function($filter