jQuery反映用戶輸入作爲類型，在一個單獨的div

Question

我有一個文本框稱爲names，它允許用戶輸入單個單詞，每個單詞由一個空格分隔。

然後我有一個名爲divpreview其中包含任何最初，但出現在names文本的每個字符，我想在預覽div來顯示這一點，每個單詞（根據「空間」分離 - ）作爲單獨的span標籤輸出（這樣我就可以在預覽中對每個人的名稱應用樣式）

我還應該提到，在某些情況下，值將通過jQuery到達names文本框UI自動完成列表（我已經開始工作），並且還預先填充（例如，當我正在編輯一個記錄時，例如用以前選擇的名稱預先填充文本框）

我的jQuery不是很好，我已經找到了解決方案，但沒有太多成功。

我該如何去實現這一目標？

Answer 1

我只需從names文本框中取出所有文本，並將其填充到每個關鍵筆劃的預覽div中，除非性能成爲問題。

$('#names').bind('keyup', function(){ 
    var text = $(this).val(); 
    var tokens = text.split(" "); 
    var output = ""; 
    for(int i=0; i<tokens.length; i++){ 
     output+= "<span>"+tokens[i]+"</span>&nbps;"; //note extra space at the end 
    } 
    $('#preview').innerHTML=output; 
}); 

Answer 2

你可以這樣做..創建一個JavaScript函數，每當用戶在文本框字段上按某個鍵時調用該函數。

<script language="javascript"> 
    $("#names").keypress(function() { 
     populateWord('keypress'); 
    }); 

    //blur function is to fix the bug, because last word may not contain space in the end, and we only want to perform update when textbox loose focus and word may or may not end with space  
    $("#names").blur(function() { 
     populateWord('blur'); 
    }); 

    function populateWord(type){ 
     val = $("#names").val(); 
     var gotLetter = false; //to avoid word which contains only space in loop back lookup 
     //we first check if we got a space then it means we got a word 
     if((val[val.length-1] == ' ' $$ type == 'keypress') || type == 'blur'){ 
      var word = ''; 
      for(var i= val.length-1; i >= 0; i--){ 
       if (val[i] == ' ' && gotLetter){ 
        //we got the last entered word 
        //now append it to preview div 
        $("#previewDiv").append("<span>"+word+"</span>"); 
        break; 
       } 
      else{ 
       word = val[i]+word; 
       if (val[i] != ' '){ 
        gotLetter = true; 
       } 
      } 
      } 
     } 

    } 

</script>