【范例7-3 文本编辑框制作简单的调查问卷】
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18 <!--placeholder属性的内容会在编辑框内以灰色显示-->
19
20 <!--当data-clear-btn的值为true时,当该编辑框被选中-->
21 <!--可以单击右侧的按钮将其中的内容清空-->
22
23
24
25
26
27
28 <!--使用label时要使用for属性指向其对应控件的id-->
29
30
31
32
33
34
35
运行结果如图7-4所示。
当在编辑框中输入内容时,页面会发生一定的变化,如页面上方输入姓名和电话的两个编辑框中的文字会自动消失,要求填写电话信息的编辑框右侧会出现一个“删除”的图标,单击该图标,编辑框中的内容会被自动删除。另外,页面下方两个编辑框的内容会随着其中内容的行数而自动增加高度。
在问卷中填入数据后的页面如图7-5所示。之所以会带来这些变化是由于,jQuery Mobile为文本编辑框设置了一些属性,如placeholder属性中的内容即是当编辑框未被使用时在其中显示的内容。而当用户在编辑框中输入数据之后,placeholder所标注的内容会自动消失。
图7-4 简单的手机调查问卷 图7-5 在问卷中填入内容
在本范例中新用到的控件textarea,可以认为是一种定义了多行文本的文本编辑控件,它可以根据其中的内容自动调整自身的高度,同时也可以通过拖拽的方式对其大小进行调整。
另外有读者也许会注意到在输入电话的编辑框中,笔者将空间的type属性设置为了tel,这样就会在用户输入其中内容时,自动将输入法切换到数字键盘,方便用户使用。
另外,jQueryMobile还提供了一些其他属性,表7-1将它们一一列举出来,供读者参考。
想学习更多知识,看本连载,或购买本书
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/9848525/viewspace-1255466/ ,如需转载,请注明出处,否则将追究法律责任。