Open xinglie opened 3 years ago
输入框用于收集用户的输入内容,通常配合其它元素来收集用户录入的文本信息
首先从“表单”元素中,添加“输入框”到设计区,如下图
它的整体功能和“文本”非常相似,这里重点解释下“属性”面板中几个属性的意思。
输入框背后就是一个input标签,如<input placeholder="hoder text" value="initial value"/>
input
<input placeholder="hoder text" value="initial value"/>
指input标签属性中的placeholder属性,可用它设置提示输入什么样的内容
placeholder
指input标签属性中的value属性,可用它设置默认填充的内容
value
用于对当前input进行特殊标识,通常与其它程序配合时,方便识别定位。最终以markAs这个key存在于JSON数据中。
markAs
key
JSON
设计器会对使用的input标签提供与当前皮肤相同的默认样式,如果您需要对input做视觉上的控制,则可以提供一个样式,如
<style> .hide-border{border:none!important} </style>
您需要先把上述样式添加到页面上,然后在该属性里,填写上hide-border则输入框的边框将不可见。
hide-border
用于序列化表单数据时,增加的一个名称属性,方便对数据快速识别。类似<input name/>中的name作用
<input name/>
name
用于把input换成textarea以便用户可以换行输入内容
textarea
在完成设计,嵌入到页面供用户使用时,所有的表单元素都会向外派发elementinput事件,在该事件内,可以实时获取用户输入的内容。
elementinput
比如在document.body上添加事件监听
document.body
document.body.addEventListener('elementinput',e=>console.log(e));
该elementinput事件增加的参数对象如下
elementType: 'form-input',//针对这个输入元素,elementType则是固定死的form-input值 elementValue: userInputValue,//用户当前输入的内容 elementName: inputName,//这是前面第5点提到的识别名称,如果未填写的话,将是一个空字符串 elementInput: input//用户正在输入使用的input框 dom节点对象
首先从“表单”元素中,添加“输入框”到设计区,如下图
它的整体功能和“文本”非常相似,这里重点解释下“属性”面板中几个属性的意思。
输入框背后就是一个
input
标签,如<input placeholder="hoder text" value="initial value"/>
1. 占位文本
指
input
标签属性中的placeholder
属性,可用它设置提示输入什么样的内容2. 默认文本
指
input
标签属性中的value
属性,可用它设置默认填充的内容3. 扩展标记
用于对当前
input
进行特殊标识,通常与其它程序配合时,方便识别定位。最终以markAs
这个key
存在于JSON
数据中。4. 扩展样式
设计器会对使用的
input
标签提供与当前皮肤相同的默认样式,如果您需要对input
做视觉上的控制,则可以提供一个样式,如您需要先把上述样式添加到页面上,然后在该属性里,填写上
hide-border
则输入框的边框将不可见。5. 识别名称
用于序列化表单数据时,增加的一个名称属性,方便对数据快速识别。类似
<input name/>
中的name
作用6.多行模式
用于把
input
换成textarea
以便用户可以换行输入内容事件
在完成设计,嵌入到页面供用户使用时,所有的表单元素都会向外派发
elementinput
事件,在该事件内,可以实时获取用户输入的内容。比如在
document.body
上添加事件监听该
elementinput
事件增加的参数对象如下