表单-输入框

[xinglie]

输入框用于收集用户的输入内容，通常配合其它元素来收集用户录入的文本信息

首先从“表单”元素中，添加“输入框”到设计区，如下图

它的整体功能和“文本”非常相似，这里重点解释下“属性”面板中几个属性的意思。

输入框背后就是一个input标签，如<input placeholder="hoder text" value="initial value"/>

1. 占位文本

指input标签属性中的placeholder属性，可用它设置提示输入什么样的内容

2. 默认文本

指input标签属性中的value属性，可用它设置默认填充的内容

3. 扩展标记

用于对当前input进行特殊标识，通常与其它程序配合时，方便识别定位。最终以markAs这个key存在于JSON数据中。

4. 扩展样式

设计器会对使用的input标签提供与当前皮肤相同的默认样式，如果您需要对input做视觉上的控制，则可以提供一个样式，如

<style>
.hide-border{border:none!important}
</style>

您需要先把上述样式添加到页面上，然后在该属性里，填写上hide-border则输入框的边框将不可见。

5. 识别名称

用于序列化表单数据时，增加的一个名称属性，方便对数据快速识别。类似<input name/>中的name作用

6.多行模式

用于把input换成textarea以便用户可以换行输入内容

事件

在完成设计，嵌入到页面供用户使用时，所有的表单元素都会向外派发elementinput事件，在该事件内，可以实时获取用户输入的内容。

比如在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节点对象