当我点击它时,JQuery 清空一个文本字段

发布于 2024-10-03 15:06:04 字数 130 浏览 4 评论 0原文

如果我单击文本字段(html 表单)来写一些内容,如何清空该文本字段。

伪代码:

On click #searchform
Erase String in #searchform

How do I empty a textfield (html form) if I click in it to write something.

Pseudo Code:

On click #searchform
Erase String in #searchform

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

扫码二维码加入Web技术交流群

发布评论

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

评论(4

晨光如昨 2024-10-10 15:06:04
$('#searchform').click(function() { $(this).val('') })
$('#searchform').click(function() { $(this).val('') })
煞人兵器 2024-10-10 15:06:04

在这里尝试

$('#searchform').click(function() { 
    if ($(this).val() == 'Enter search term') {   
        $(this).data('original', $(this).val()).val('');
    }
});

$('#searchform').blur(function() { 
    if ($(this).val() == '') {   
        $(this).val($(this).data('original'));
    }
});

编辑到目前为止,您应该使用placeholder 属性,如果需要,可以使用上面的内容作为缺失占位符支持的填充。

if (!('placeholder' in document.createElement('input'))){
    $('input[placeholder]').each(function() {
        $(this).placeholder();
    });
}

并将原始代码变成插件以便于使用(带有一些小mod)。

jQuery.fn.placeholder = function() {
    return this.each(function() {
        var value = $(this).attr('placeholder');
        jQuery(this).val(value).addClass('placeholder');
        jQuery(this).focus(function() {
            if (jQuery(this).val() == value) {
                jQuery(this).val('').removeClass('placeholder');
            }
        });

        jQuery(this).blur(function() {
            if (jQuery(this).val() == '') {
                jQuery(this).val(value).addClass('placeholder');
            }
        });
    });
};

Try it here

$('#searchform').click(function() { 
    if ($(this).val() == 'Enter search term') {   
        $(this).data('original', $(this).val()).val('');
    }
});

$('#searchform').blur(function() { 
    if ($(this).val() == '') {   
        $(this).val($(this).data('original'));
    }
});

EDIT As of now you should use the placeholder attribute and if you want, use the above as a polyfill for missing placeholder support.

if (!('placeholder' in document.createElement('input'))){
    $('input[placeholder]').each(function() {
        $(this).placeholder();
    });
}

And turn the original code into a plugin for easy use (with some small mods).

jQuery.fn.placeholder = function() {
    return this.each(function() {
        var value = $(this).attr('placeholder');
        jQuery(this).val(value).addClass('placeholder');
        jQuery(this).focus(function() {
            if (jQuery(this).val() == value) {
                jQuery(this).val('').removeClass('placeholder');
            }
        });

        jQuery(this).blur(function() {
            if (jQuery(this).val() == '') {
                jQuery(this).val(value).addClass('placeholder');
            }
        });
    });
};
余生再见 2024-10-10 15:06:04

我建议您使用 HTML5 占位符属性。例如:

<input type="text" placeholder="some default string if empty" />

这适用于大多数最新的浏览器,对于较旧的浏览器,有一个解决方法 jQuery 插件。这是占位符插件的链接。

然后你只需调用:

$('input[placeholder]').placeholder();

I'd recommend you using the HTML5 placeholder attribute. For example:

<input type="text" placeholder="some default string if empty" />

This will work with most of the newest browsers and for older ones there is a workaround jQuery plugin. Here is the link to the placeholder plugin.

And then you simply call:

$('input[placeholder]').placeholder();
佞臣 2024-10-10 15:06:04

如果您想清除“输入搜索词”等字段的默认值,我使用以下代码:

function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
} 

然后在我的输入字段中添加:

onfocus="clearText(this)"

所以它将是:

<input type="text" name="username" value="enter your name here"  onfocus="clearText(this)">

If you are wanting to clear a default value from a field such as "Enter Search Term" I use the following code:

function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
} 

and then on my input field I add:

onfocus="clearText(this)"

So it would be:

<input type="text" name="username" value="enter your name here"  onfocus="clearText(this)">
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文