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

发布于 2024-10-17 11:53:35 字数 1315 浏览 5 评论 0原文

好的，我正在使用 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>

原文

Ok I'm using the jQuery Mobile framework and I would like to be able to use the default values in a text or text area as helper text. But on focus clear the text and keep the newly entered value. Also on re-focus (say they touch it again by mistake) not to clear the value again.

I'm including these

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

The example is not working

Adding this to the page itself: (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>

Here is the HTML (It's in a form tag as well)

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鱼窥荷 2024-10-24 11:53:35

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

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

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

For future generations: there's a thing called placeholder in HTML5

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

Placeholder is currently supported in newest webkit-based browsers.

回复收藏 0 原文

早茶月光 2024-10-24 11:53:35

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

I was able to get your code to work using jQuery 1.5 and jQuery Mobile 1.0a3. Did you include jQuery as well as jQuery Mobile? jQuery Mobile requires a version of jQuery to work.

Edit: I should note that I only tested this on the iPhone simulator, and not an actual device. The simulator was running 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>

回复收藏 0 原文

回心转意 2024-10-24 11:53:35

进一步到 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 方法效果不佳，因此在这种情况下取消隐藏标签会更好。

Further to HTML5's input placeholder attribute, which behaves exactly as the helper text you describe; jQuery Mobile recommends using the label field with the class "ui-hidden-accessible":

For the sake of accessibility, jQuery Mobile requires that all form
elements be paired with a meaningful label

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

You can then use Modernizr to detect the support for the placeholder attribute and if it is not supported, use a polyfill (like this one) or remove the ui-hidden-accessible class which will display the labels.

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

then style the new label as desired. I've found the polyfill approach doesn't work well when the input field is type="password", so unhiding the label is better in that case.

回复收藏 0 原文

~没有更多了~