jquery - 搜索栏不显示 rel 标签

Question

我已经设置了一个 rel 标签来在我的搜索栏中显示一些文本。由于某些奇怪的原因，它没有在主页上显示文本: http://www.horecavacaturebank.nl/

<input type="text" id="search" title="" name="s" class="text placeholder" rel="Alle vacatures" value="" />
<input type="text" id="near" title="Locatie" name="location" class="text placeholder" rel="Locatie" value="" />

我在“Bekijk CV”页面上使用了相同的代码，它确实有效: http://www.horecavacaturebank.nl/cv/

<input type="text" id="search" title="" name="s" class="text placeholder resume-search" rel="CV's zoeken" value="" /

我已经花了大约 2 个小时来解决这个问题，我认为现在是向你们寻求帮助的好时机。提前致谢!

编辑: 它似乎与 jquery 文件有点冲突。如果我删除以下行，搜索栏可以工作，但 slider 将不再存在:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.3.min.js"></script>

Answer 1

@Quentin 是对的。您不应将 rel 属性用于 input 元素。

您可以使用一些简单的 jQuery 来获得您想要的效果

$('#search').val('Alle vacatures');
$('#near').val('Locatie');

$('#search, #near').focusin(function(){
    $(this).val('')
});

$('#search, #near').focusout(function(){
    if ($('#search').val() == ""){
        $('#search').val('Alle vacatures');    
    }
    if ($('#near').val() == ""){
        $('#near').val('Locatie');    
    }
});

您设置在输入中显示的值。当您专注于任一输入时，该值将被删除。一旦输入失去焦点，如果没有向该字段添加任何内容，该值将再次放回原处。

http://jsfiddle.net/2HY7y/