2

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

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

5 回答 5

3

这应该可以解决问题：

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

在此处查看小提琴：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">

JS

$('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'));
    });

编辑：

下面是 ANeves 提出的一个替代方案，它利用了 HTML5占位符属性。如果您不关心旧浏览器，您可以单独使用占位符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="rickastin@youjustgot.com">

JS

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'));
        });
}
于 2011-09-26T16:10:59.977 回答
0

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

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/

于 2011-09-26T16:02:56.327 回答
0

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

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

希望能帮助到你。

于 2011-09-26T16:03:18.367 回答
0

使用原生 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>

JS

$('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/

于 2011-09-26T16:00:20.410 回答
0

我就是这样做的，希望对你有帮助。

HTML 

  <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:");        
    });
于 2011-09-26T16:26:06.810 回答