Question

我有一个简短的jQuery脚本，当用户点击链接时，会在搜索框中添加images:等文字。但是，如果用户单击其他选项卡，则会删除他们键入的搜索。我想保留用户键入的内容（如果他们输入了任何内容），始终位于:之后。 可以删除任何内容。

我该怎么做？

我目前的jQuery是：

$(document).ready(function(){
    $("#navigation a").click(function(){
        $("#search").val($(this).attr("id")+': ').focus();
        return false
    });
});

我的HTML是：

<ul id="navigation">
    <li><a href="#" id="images">Images</a></li>
    <li><a href="#" id="videos">Videos</a></li>
    <li><a href="#" id="articles">News</a></li>
    <li><a href="#" id="weather">Weather</a></li>
</ul>

<input type="text" id="search">

您可以在JSFiddle上看到当前代码的工作示例：http://jsfiddle.net/Zusnw/

Answer 1

我建议：

$("#navigation a").click(function(){
    var search = $('#search'),
        curVal = $('#search').val(),
        i = curVal.indexOf(':'),
        newVal = i !== -1 ? curVal.substring(i) : ': ' + curVal;
    $('#search').focus().val(this.id + newVal);
});

JS Fiddle demo

Answer 2

这是你想要的修复。

$(document).ready(function(){
    $("#navigation a").click(function(){
        var searchBox = $("#search");
        var searchBoxVal = searchBox.val();     
        var newVal = '';
        if(searchBoxVal.indexOf(":") > -1)
        {
            // get the content after the colon...
            newVal = this.id + ":" +searchBoxVal.substring(searchBoxVal.indexOf(":")+1);
        }
        else
        {
            newVal = this.id + ": ";
            if(searchBoxVal.length > 0) 
            {
                // if colon not found but user has type anythings...
                newVal += searchBoxVal;
            }
        }
        searchBox.val(newVal);
        searchBox.focus();
        return false;
    });
});

使用jQuery在现有文本框内容之前插入文本

2 个答案: