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

我有一个简短的jQuery脚本，当用户单击链接时，它会向搜索框中添加像

图像：

这样的文本。但是，如果用户单击其他选项卡，则他们键入的搜索将被删除。我想保留用户键入的内容（如果他们键入了任何内容），这些内容将始终位于

：

之后删除之前的任何内容。

我该怎么做

我当前的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">

您可以在JSFIDLE上看到当前代码的工作示例：

我建议：

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

---

.

这是您想要的解决方案

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

---

如果用户键入的内容后跟

：

？因为

val（）

返回一个字符串，该字符串没有

focus（）

方法。因此，我没有测试的澄清，这只是我的第一个想法。更新后的答案有效。既然脚本显式添加了一个值，为什么值中没有一个

：

。修改代码以不处理冒号大小写。如果没有

：

，我们将使用用户修改的内容。