Question

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

$('#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，请执行以下操作：

将帮助文本更改为Please enter a category
请勿提交表格。

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

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

Answer 1

HTML5 placeholder是你应该用于支持它的浏览器，没有代码可以编写来删除它。

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

为什么你不只是忽略服务器上的默认值？似乎是一个过滤掉它的合理位置。

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

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

Answer 2

jsBin demo

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()（空格）：）

Answer 3

如果您无法使用placeholder（如果可以，您真的应该这样做），那么您只需将字段设置为disabled：

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

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

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

然而：


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

Citation: http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2

Answer 4

我同意使用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;
});

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

Answer 5

您正在尝试获取提交按钮的.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
});

Answer 6

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

<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;
  });
});

提交时清除默认搜索文本

6 个答案:

jsBin demo