Input/Textarea文本输入

文本输入组件是根据AppCan 布局框架对<input type="text" />标签封装的HTML5代码片段，通过配合的样式，使开发者在界面中可以快速使用input标签。

依赖

• appcan.js
• appcan.control.js
• appcan.control.css

例如

HTML5代码

1. /*搜索框*/
2. <div class="sc-bg-active uinput ub ub-f1  bc-border uba">
3. <div class="uinn fa fa-search sc-text"></div>
4. <input placeholder="请输入搜索城市" type="text" class="ub-f1">
5. </div>
6. /*登陆表单*/
7. <form>
8. <div class="umar-a uba bc-border">
9. <div class="ub ub-ac ubb umh5 bc-border ">
10. <div class=" uinput ub ub-f1">
11. <div class="uinn fa fa-user sc-text"></div>
12. <input placeholder="请输入搜索城市" type="text" class="ub-f1">
13. </div>
14. </div>
15. <div class="ub ub-ac umh5 bc-border ">
16. <div class=" uinput ub ub-f1">
17. <div class="uinn fa fa-lock sc-text"></div>
18. <input placeholder="请输入登录秘密吗" type="password" class="umw4 ub-f1">
19. </div>
20. </div>
21. </div>
22. <div class="uinn">
23. <div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a1"  id="submit">
24. <div class="uinn3 fa fa-shield umh1 umw1"></div>
25. 登录
26. </div>
27. </div>
28. <button type="submit"class="uinvisible"></button>
29. </form>

JS代码

1. appcan.button("#submit", "ani-act", function() {
2. $("form").submit();
3. })

5. $("form").on('submit', function() {
6. appcan.request.postForm($("form"), function() {
7. appcan.window.alert({
8. title : "提醒",
9. content : "您已经提交了表单:)",
10. buttons : '确定',
11. callback : function(err, data, dataType, optId) {
12. console.log(err, data, dataType, optId);
13. }
14. });
15. },function(err){

17. });
18. return false;
19. });

配合form标签实现form的快捷提交。