1

好的，我正在使用jQuery Mobile 框架，我希望能够将文本或文本区域中的默认值用作帮助文本。但是在焦点上清除文本并保留新输入的值。还要重新聚焦（假设他们再次错误地触摸它）不要再次清除该值。

我包括这些

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

该示例不起作用

将此添加到页面本身：（链接到示例）

<script type="text/javascript">
    $('.default-value').each(function() {
        var default_value = this.value;
        $(this).focus(function() {
            if(this.value == default_value) {
                this.value = '';
            }
        });
        $(this).blur(function() {
            if(this.value == '') {
                this.value = default_value;
            }
        });
    });
</script>

这是 HTML（它也在表单标签中）

<!-- Address 2 -->
<div data-role="fieldcontain">
    <label for="address-2">Address 2</label>
    <input type="text" name="address-2" id="address-2" class="default-value" value="Apt #, Suite #, Floor #"  />
</div>
4

3 回答 3

9

对于后代：HTML5 中有一种叫做占位符的东西

<input type="text" name="address-2" placeholder="Apt #, Suite #, Floor #"  />

当前最新的基于 webkit 的浏览器支持占位符。

于 2011-02-15T08:27:28.080 回答
3

我能够使用 jQuery 1.5 和 jQuery Mobile 1.0a3 让您的代码正常工作。您是否包括了 jQuery 和 jQuery Mobile？jQuery Mobile 需要一个 jQuery 版本才能工作。

编辑：我应该注意我只在 iPhone 模拟器上测试过这个，而不是实际的设备。模拟器运行 iOS 4.0.1。

<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script><script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.js" type="text/javascript"></script></head>

<div data-role="fieldcontain">
    <label for="address-2">Address 2</label>
    <input type="text" name="address-2" id="address-2" class="default-value" value="Apt #, Suite #, Floor #"  />
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('.default-value').each(function() {
            var default_value = this.value;
            $(this).focus(function() {
                if(this.value == default_value) {
                    this.value = '';
                }
            });
            $(this).blur(function() {
                if(this.value == '') {
                    this.value = default_value;
                }
            });
        });
    });
</script>
于 2011-02-14T17:35:30.070 回答
0

除了 HTML5 的输入占位符属性，它的行为与您描述的帮助文本完全相同；jQuery Mobile 建议使用带有“ui-hidden-accessible”类的标签字段：

为了便于访问，jQuery Mobile 要求所有表单元素都与一个有意义的标签配对

http://jquerymobile.com/demos/1.1.0/docs/forms/docs-forms.html

然后，您可以使用 Modernizr 来检测对占位符属性的支持，如果不支持，请使用 polyfill（如这个）或删除将显示标签的 ui-hidden-accessible 类。

if(!Modernizr.input.placeholder){
$('label.ui-hidden-accessible')
    .removeClass('ui-hidden-accessible')
    .addClass('ui-accessible');
}

然后根据需要设置新标签的样式。我发现当输入字段为 type="password" 时，polyfill 方法效果不佳，因此在这种情况下取​​消隐藏标签会更好。

于 2012-07-04T08:53:29.407 回答