1

我有以下代码将帮助文本放入搜索输入框中，当您单击该框时该文本会被删除，如果您单击其他任何地方而不更改它，则会返回：

$('#search-form input[type="text"]').each(function(){
    var defaultVal = 'Category Search';
    $(this).focus(function(){
      if ($(this).val() == defaultVal){
        $(this).removeClass('active').val('').css('color', '#000');;
      }
    })
    .blur(function(){
      if ($(this).val() == ''){
        $(this).addClass('active').val(defaultVal).css('color', '#CCC');
      }
    })
    .blur().addClass('active');
});

但是如果用户在没有点击输入框的情况下点击提交，网站会搜索帮助值（Category Search）。

我需要做的是在提交时检查值，如果是，Category Search则执行以下操作：

  • 将帮助文本更改为Please enter a category
  • 不要提交表格。

我试过这个，但它阻止了我的默认值（类别搜索）一起工作：

$('#search-form input[type="submit"]').click(function() {
    if ($(this).val() == "Category Search")
        //do stuff here
});​
4

6 回答 6

2

HTML5 占位符是您应该为支持它的浏览器使用的，无需编写代码来删除它。

对于不支持它的浏览器，有很多插件可以让它工作。

为什么不忽略服务器上的默认值？似乎是过滤掉它的合乎逻辑的地方。

您的代码失败的原因是这是提交按钮，而不是表单字段！

$('#search-form input[type="submit"]').click(function() {
if ($(this).val() == "Category Search")  <-- this is the submit button, not the input
    //do stuff here
});​

您需要将其更改为指向输入

$('#search-form').on("submit",function() {
    $('#search-form input[type="text"]').each( function() {
        //do comparison here, you could use defaultValue attribute
    } );
});​
于 2012-11-12T14:04:33.677 回答
2

jsBin 演示

var defaultVal = 'Category Search';
var enterCat = 'Please enter a category';

$('#search-form input[type="text"]').each(function(){
  
    $(this).focus(function(){
      if ($(this).val() == defaultVal || $(this).val() == enterCat){
        $(this).removeClass('active').val('').css('color', '#000');
      }
    })
    .blur(function(){
      if ($.trim($(this).val()) === ''){
        $(this).addClass('active').val(defaultVal).css('color', '#CCC');
      }
    })
    .blur().addClass('active');
});

$('#search-form').submit(function(e) {
  
  if ( $(this).find('[type="text"]').val() === defaultVal){
    e.preventDefault();
    $(this).find('[type="text"]').prop('value', enterCat);    
  } 
  
});

并$.trim()在搜索空白输入之前使用（空格）:)

于 2012-11-12T14:23:13.190 回答
1

如果你不能使用placeholder（如果可以的话你真的应该使用），那么你可以简单地将字段设置为disabled：

$('#search-form input[type="submit"]').click(function() {
    if ($(this).val() == "Category Search") {
        $(this).prop('disabled',true);
    }
});​

该disabled属性本质上保证该字段“不成功”，因此不会提交给服务器。

一个成功的控件对于提交是“有效的”。每个成功的控件都将其控件名称与其当前值配对，作为提交的表单数据集的一部分。成功的控件必须在 FORM 元素中定义，并且必须具有控件名称。

然而：

  • 禁用的控件无法成功...

引用：http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2。

于 2012-11-12T14:05:48.190 回答
1

我同意使用placeholder，但这是您问题的答案：

$('#search-form input[type="submit"]').click(function() {
if ($('#search-form input[type="text"]') == "Category Search")
    $('#search-form input[type="text"]').val("Please enter a category");
    return false;
});​

我个人会在搜索字段附近创建一个错误框，而不是更改其中已有的文本 - 否则您将遇到提交“请输入类别”的人的问题......

于 2012-11-12T14:05:58.433 回答
1

您正在尝试获取提交按钮的 .val()

$('#search-form input[type="submit"]').click(function() {
   if ($('#search-form input[type="text"]').val() == "Category Search")
      //do stuff here
});​

但是您可能应该将其挂钩以提交表单本身的事件，但这取决于您的实现实际如何工作。

 $('#search-form').submit(function() {
   if ($('#search-form input[type="text"]').val() == "Category Search")
      //do stuff here
});​
于 2012-11-12T14:07:09.647 回答
0

简单得多：大多数新浏览器都允许这样做：

<input type="text" placeholder="your prompt here" />

但对于较旧的浏览器，您可以这样做：

$(function() {
  if ($.browser.msie) {
    $('#search-form input[type="text"]').each(function(){       
      $(this).val($(this).attr("placeholder"));
    });
  }
  $("#search-form").on("submit",function() {
    var cnt=0,empty++;
    $("#search-form input[type='text']").each(function(){
      var box = $(this),val = box.val();
      if (val == box.attr("placeholder")){
        box.val("");
      }
      else {
        box.val($.trim(val));
      }
      if (box.val()=="") empty++;
      cnt++;
    });
    if (empty==cnt) return false;
  });
});
于 2012-11-12T14:04:31.960 回答