Question

我想更改搜索框中的文本值，例如“Awesome Search”。我知道它可以用Jquery完成，但我不能让它工作。你能帮忙吗？

注意，这是Wordpress提供的默认设置，并且（对我来说）很难进入并编辑文件以将内容与行为分开，因此我需要Jquery覆盖默认值。到目前为止提供的两个答案似乎并没有这样做。

<input type="text"
       onblur="if (this.value == '') {this.value = 'To search, type and hit enter';}"
       onfocus="if (this.value == 'To search, type and hit enter') {this.value = '';}"
       id="s"
       name="s"
       value="To search, type and hit enter"
       class="text_input">

Answer 1

首先，因为您正在使用jQuery：从您的标记中获取代码。把它放在你的文件的头部：

<script type="text/javascript">
    $(function() {
        var s = $('#s');
        s.blur(function() {
            if (s.val() === '') {
                s.val('To search, type and hit enter');
            }
        }).focus(function() {
            if (s.val() === 'To search, type and hit enter') {
                s.val('');
            }
        });

    });
</script>

然后在身体

<input type="text"
       id="s"
       name="s"
       value="To search, type and hit enter"
       class="text_input" />

然后你需要绑定到你的表单提交。你在做ajax电话吗？它看起来像是：

$('#theFormId').submit(function(e) {
    e.preventDefault();
    // do your ajax stuff.
    // in the callback:
    $('#s').val('Awesome Search.');
});

Answer 2

所以看起来你只是想在页面加载时替换文本框的默认值，而不是修改HTML，因此使用jQuery ......

$(function () {
    $('#s').val('Awesome Search');
});

Answer 3

输入：

<input type="text" id="s" name="s" value="To search, type and hit enter" class="text_input">

和jQuery：

$('#s').focus(function() {
    if ($(this).text() == 'To search, type and hit enter'){
        $(this).text('');
    }
}

$('#s').blur(function() {
    if (strlen($.trim($(this).text())) == 0){
        $(this).text('To search, type and hit enter');
    }
}

我怎样才能用jquery来改变它？

3 个答案: