Question

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

我包括这些

<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>

示例无效

将此添加到页面本身：（link to example）

<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>

Answer 1

对于后代：在HTML5中有一个称为占位符的东西

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

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

Answer 2

我能够使用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>

Answer 3

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

为了便于访问，jQuery Mobile要求所有形式元素与有意义的标签配对

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

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

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

然后根据需要设置新标签的样式。我发现当输入字段是type =“password”时，polyfill方法不能正常工作，因此在这种情况下取消隐藏标签会更好。

清除移动网站表单字段元素上的默认文本

3 个答案: