文本输入框 Text inputs

优质
小牛编辑
125浏览
2023-12-01

文本输入框和文本输入域使用标准的html标记的,然后Jquery Mobile会让他们变得更吸引人而且易于触摸使用

要使用输入标准文字的输入框,给input增加type="text"属性。注意要把label的for属性设为input的id值,使他们能够在语义上相关联,并且要用div容器包裹它们,并给他设定data-role="fieldcontain"属性

HTML 代码:

<div data-role="fieldcontain">    
    <label for="name">Text Input:</label>    
    <input type="text" name="name" id="name" value=""  />
</div>

文本输入?Text Input:

密码输入框 Password inputs

给input设置type="password"属性,可以设置为密码框,注意要把label的for属性设为input的id值,使他们能够在语义上相关联,并且要用div容器包裹它们,并给他设定data-role="fieldcontain"属性

HTML 代码:

<div data-role="fieldcontain">
    <label for="password">Password Input:</label>
    <input type="password" name="password" id="password" value="" />
</div>

密码输入框 Password inputs

其他的标准的HTML5输入框类型 More standard HTML5 input types

在Jquery Mobile中,你可以使用新的HTML5输入框类型,比如email, tel, number。Jquery Mobile会把某些类型的输入框降级为普通的文字输入框(目前?range和search)。你可以在页面的插件选项里设置,把需要的input类型降级为普通的文字输入框

文本域 Textareas

对于多行输入可以使用textarea元素。Jquery Mobile框架会自动加大文本域的高度防止出现在移动设备中很难使用的滚动条的出现

注意要把label的for属性设为input的id值,使他们能够在语义上相关联,并且要用div容器包裹它们,并给他设定data-role="fieldcontain"属性

HTML 代码:

<div data-role="fieldcontain">
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>