用jQuery在現有文本框內插入文本

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