我可以使用 jquery 来清空文本区域字段或像输入框一样的 ajax 吗？

发布于 2024-12-06 13:53:34 字数 472 浏览 1 评论 0原文

我总是在工作中使用这个片段：

<input type="text" onblur="if (this.value=='') { this.value='your email'; }" onfocus="if (this.value == 'your email') { this.value=''; }" value="your email" />

基本上，它会显示一个文本框，其中“您的电子邮件”作为值，当单击文本输入框时 - 该值变为空白..因此他们输入电子邮件..如果他们不这样做如果不输入电子邮件，它将重置回“您的电子邮件”。

我想对 textarea 执行此操作或类似操作并将其转换为 jQuery（也是 jQuery 中的上述代码）？

<textarea name="msg">Message:</textarea><br />

原文

I always use this snippet in my work:

<input type="text" onblur="if (this.value=='') { this.value='your email'; }" onfocus="if (this.value == 'your email') { this.value=''; }" value="your email" />

Basically it will show a text box with "your email" as the value, when the clicks the text input box - the value becomes blank.. thus they type their email.. if they don't type an email it will reset back to the "your email".

I want to do this or similar with textarea and convert it to jQuery (also the above code in jQuery)?

<textarea name="msg">Message:</textarea><br />

分享到QQ

分享到微博

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

发布评论

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

饭团 2024-12-13 13:53:35

这应该可以解决问题：

适用于输入和文本区域 - 无论您为每个区域设置什么默认值都将持续存在。按原样使用。

请参阅此处的小提琴： http://jsfiddle.net/leifparker/DvqYU/2/

（这提取并存储数据属性中的默认值）

HTML

<textarea>I love bananas ..</textarea>
<textarea>How about you?</textarea>
<input type="text" value="Time for a bath ..">
<input type="text" value=".. because I smell">

$('textarea, input[type=text]')
    .each(function(){ 
        $(this).data('defaultText', $(this).val());
    })
    .focus(function(){
        if ($(this).val()==$(this).data('defaultText')) $(this).val('');
    })
    .blur(function(){
        if ($(this).val()=='') $(this).val($(this).data('defaultText'));
    });

EDIT:

ANeves 提出了一种使用 HTML5 placeholder 属性的替代方案，如下所示。如果您不关心旧浏览器，您可以单独使用 占位符 HTML（它可以在本机运行，结果与上面的 JS 类似），否则，如下所示，您将需要添加一个JS后备。

在这里小提琴： http://jsfiddle.net/leifparker/DvqYU/14/

HTML

<textarea placeholder="A few words about yourself"></textarea>
<textarea placeholder=".. and a few more about your mangy cat."></textarea>
<input type="text" placeholder="Your Awesome City">
<input type="email" placeholder="[email protected]">

function hasPlaceholderSupport() {
  var input = document.createElement('input');
  return ('placeholder' in input);
}

if (!hasPlaceholderSupport()){
    $('textarea, input[type=text], input[type=email]')
        .each(function(){
            if ($(this).val()=='') $(this).val($(this).attr('placeholder'));
        })
        .focus(function(){
            if ($(this).val()==$(this).attr('placeholder')) $(this).val('');
        })
        .blur(function(){
            if ($(this).val()=='') $(this).val($(this).attr('placeholder'));
        });
}

This ought to do the trick:

Will work for both inputs and textareas -- Whatever default you set for each will persist. Use as is.

See Fiddle here : http://jsfiddle.net/leifparker/DvqYU/2/

(This pulls and stores the default value in a data attribute)

HTML

<textarea>I love bananas ..</textarea>
<textarea>How about you?</textarea>
<input type="text" value="Time for a bath ..">
<input type="text" value=".. because I smell">

$('textarea, input[type=text]')
    .each(function(){ 
        $(this).data('defaultText', $(this).val());
    })
    .focus(function(){
        if ($(this).val()==$(this).data('defaultText')) $(this).val('');
    })
    .blur(function(){
        if ($(this).val()=='') $(this).val($(this).data('defaultText'));
    });

EDIT:

An alternative brought up by ANeves, and which makes use of the HTML5 placeholder attribute is below. If you don't care about old browsers, you can use the placeholder HTML on its own (and it works natively, with results similar to the JS above), or otherwise, as below, you'll need to add a JS fallback.

Fiddle here : http://jsfiddle.net/leifparker/DvqYU/14/

HTML

<textarea placeholder="A few words about yourself"></textarea>
<textarea placeholder=".. and a few more about your mangy cat."></textarea>
<input type="text" placeholder="Your Awesome City">
<input type="email" placeholder="[email protected]">

function hasPlaceholderSupport() {
  var input = document.createElement('input');
  return ('placeholder' in input);
}

if (!hasPlaceholderSupport()){
    $('textarea, input[type=text], input[type=email]')
        .each(function(){
            if ($(this).val()=='') $(this).val($(this).attr('placeholder'));
        })
        .focus(function(){
            if ($(this).val()==$(this).attr('placeholder')) $(this).val('');
        })
        .blur(function(){
            if ($(this).val()=='') $(this).val($(this).attr('placeholder'));
        });
}

回复收藏 0 原文

沙沙粒小 2024-12-13 13:53:35

我认为您指的是这样的占位符：

http://andrew-jones.com/jquery- placeholder-plugin/

希望有帮助。

回复收藏 0 原文

熟人话多 2024-12-13 13:53:35

您可以使用数据属性作为适用于文本区域和输入框的通用解决方案 -

HTML

<textarea name="msg" data-notext="text here">Message:</textarea><br />
<input id="email" type="text" data-notext="email here"/>

jQuery

$("textarea, input[type=text]").bind('focus blur', function() {
    if ($(this).val() == '') $(this).val($(this).data('notext'));
})

演示 - http://jsfiddle.net/3jwtA/

You could use data attributes for a generic solution that would apply to textareas and input boxes -

HTML

<textarea name="msg" data-notext="text here">Message:</textarea><br />
<input id="email" type="text" data-notext="email here"/>

jQuery

$("textarea, input[type=text]").bind('focus blur', function() {
    if ($(this).val() == '') $(this).val($(this).data('notext'));
})

Demo - http://jsfiddle.net/3jwtA/

回复收藏 0 原文

末骤雨初歇 2024-12-13 13:53:35

使用本机 html 属性 title 指定掩码文本，然后应用以下脚本：

html

<input type="text" value="your email" title="your email" /> 
<input type="text" value="your name" title="your name" /> 
<textarea title="your description">your description</textarea>

$('input[type=text], textarea').focus(function() {
    var $ctrl = $(this);
    var title = $ctrl.attr('title');
    $ctrl.removeClass('mask');
    if ($ctrl.val()== title) { 
      $ctrl.val(''); 
    }
}).blur(function() {
    var $ctrl = $(this);
    if ($ctrl.val().length == 0) { 
        var title = $ctrl.attr('title');
        $ctrl.val(title); 
        $ctrl.addClass('mask');
    }
});

在这种情况下，您只需要为控件提供标题。

代码： http://jsfiddle.net/pJrG9/7/

Use native html attribute title to specify the mask text, and then apply following script:

html

<input type="text" value="your email" title="your email" /> 
<input type="text" value="your name" title="your name" /> 
<textarea title="your description">your description</textarea>

$('input[type=text], textarea').focus(function() {
    var $ctrl = $(this);
    var title = $ctrl.attr('title');
    $ctrl.removeClass('mask');
    if ($ctrl.val()== title) { 
      $ctrl.val(''); 
    }
}).blur(function() {
    var $ctrl = $(this);
    if ($ctrl.val().length == 0) { 
        var title = $ctrl.attr('title');
        $ctrl.val(title); 
        $ctrl.addClass('mask');
    }
});

And in this case you will need only to provide titles to the controls.

Code: http://jsfiddle.net/pJrG9/7/

回复收藏 0 原文

春花秋月 2024-12-13 13:53:35

这就是我会做的，希望它有帮助。

超文本标记语言

  <input type="text" value="Enter your email:" />   
  <textarea>Message:< /textarea>

脚本

    $("input[type=text]").focus(function(){
        if($(this).val() == "Enter your email:") $(this).val("");       
    }).blur(function(){
        if($(this).val() == "") $(this).val("Enter your email:");       
    });  

    $("textarea").focus(function(){
        if($(this).val() == "Message:") $(this).val("");        
    }).blur(function(){
        if($(this).val() == "") $(this).val("Message:");        
    });

This is how I would do it, hope it helps.

HTML

  <input type="text" value="Enter your email:" />   
  <textarea>Message:< /textarea>

SCRIPT

    $("input[type=text]").focus(function(){
        if($(this).val() == "Enter your email:") $(this).val("");       
    }).blur(function(){
        if($(this).val() == "") $(this).val("Enter your email:");       
    });  

    $("textarea").focus(function(){
        if($(this).val() == "Message:") $(this).val("");        
    }).blur(function(){
        if($(this).val() == "") $(this).val("Message:");        
    });

回复收藏 0 原文

~没有更多了~