2014-02-19 120 views
0

我是jQuery的初學者,想知道這是否可行。我有一個名稱輸入文本框的表單。我想抓住用戶輸入到該文本框中的內容並將其添加到我的textarea中的第一句。所以文本區域會說親愛的(無論用戶輸入什麼)。任何推動正確的方向將不勝感激。獲取輸入文本框的值並將其添加到文本區

<form> 
<label>First Name:</label> 
<input type="text" class="fName" /> 
<br /><br /> 
<label>Last Name:</label> 
<input type="text" class="lName"> 
<br /><br /> 
<textarea>Dear +firstname+</textarea> 
</form> 

我的表單很簡單。我還沒有嘗試過任何東西,但你是如此幫助我走向正確的方向。謝謝。

+1

你到目前爲止嘗試過什麼?你能告訴我們你的代碼嗎?把它放在這裏,並在[jsfiddle.net](http://jsfiddle.net/)上。這當然是可能的但很難回答你的問題,至少不知道你的頁面結構。 –

+0

正如答案顯而易見的那樣,它真的讓你感到困惑,你是否在附加jquery事件處理程序和抓取/設置值時遇到問題?你解析textarea的內容是否有問題以替換當前的名字?你需要提供更多關於你的具體問題的信息。 –

+0

喬治,我還沒有嘗試過任何東西,但我的形式非常簡單,將是這個樣子



消息的

jdkarate

回答

1

假設輸入具有name ID和textarea的具有area一個ID,那麼:

$("#name").on("input", function(){ 
    var name = $(this).val(); 
    var msg = "Your message here"; 
    var content = "Dear "+name+", \n" + msg; 
    $("#area").text(content); 
}); 

我會強烈建議不要使用changekeyup 作爲input 是一個更全面的檢查是否用戶改變了一切。

這裏是一個JSFiddle example


腳註:

  1. change只響應於模糊(即,用戶按壓標籤或點擊輸入之外)。
  2. keyup只適用於按鍵,所以它不會在用戶粘貼鼠標時註冊。
  3. input寄存器任意更改爲輸入。

更新

按我與@GeorgeMauer討論,這裏是推薦的方法:

$("input.full-name").on("input", function(){ 
    var full_name = $(this).val(); 
    var form = $(this).closest("form"); 
    var message = form.find(":input.message"); 
    var content = message.val(); 
    var lines = content.split("\n"); 
    lines[0] = "Dear " + full_name + ","; 
    var new_message = lines.join("\n"); 
    message.val(new_message); 
}); 

請參閱更新JSFiddle example

這有附加好處,即在不添加任何額外的JavaScript的情況下重新使用表單。它也工作得更好(例如,您可以自由編輯兩個輸入)。

+0

感謝您的幫助 – jdkarate

+0

@ jdkarate請忽略我的第一個方法並看到更新 – rybo111

1

試試這個:

$('input').keyup(function() { 
    $('textarea').text($(this).val()); 
}); 
+0

他想「將它添加到第一句「儘管我認爲他*真的希望在第一行結尾。另外我會小心地提醒他使用過於廣泛的選擇器。他是一個新手,因此毫無意義給他提供建議,這將導致很難立即發現錯誤。 –

+0

他要求一個正確的方向。我試圖給他如此。 –

+1

這真的不是。你假設他的大問題是如何獲得價值觀和價值觀,但他沒有給我們足夠的信息去了解這一點。對他來說,更大的問題可能是如何替換textarea中的值,這將涉及編寫一個基本的模板系統,在這裏你知道以前的值是什麼,並將其替換爲第一行。 –

1

你可以嘗試這樣的事情:

<script> 

    $(function() { 

     $("#name").change(function() { 
      $("#textAreaId").append($("#name").val()); 
     }); 

    }); 

</script>  

希望它可以幫助你!

+0

請參閱我對其他答案的評論 - 這不是他正在尋找的。 –

0

編輯:對於你的情況,它看起來並不像你正確設置你的表格。表單用於提交一組信息,然後將這些信息放在其他地方 - 它需要去的地方。因此,我將您的textarea移到了表單之外。

我建議設置你的HTML像這樣:

<form id="target" action> 
    <label>First Name:</label> 
    <input type="text" id="fName" /> 
    <br /><br /> 
    <label>Last Name:</label> 
    <input type="text" id="lName" /><br><br> 
    <input type="submit" value="Submit"/> 
    <br /><br /> 
</form> 
<textarea id="message"></textarea> 

這裏是我使用jQuery的:

$('form#target').submit(function(e) { 
    e.preventDefault(); 
    var message, firstName, lastName; 

    message = "Dear "; 
    firstName = $('input#fName').val(); 
    lastName = $('input#lName').val(); 

    message += firstName + ' '; 
    message += lastName + ','; 
    $('textarea#message').text(message); 
}); 

注:我改變了你的class屬性id因爲id的是意味着獨特的標籤。如果你有多個你想用jQuery一次抓取的東西,那麼類就是要走的路。

Preview Here

希望這有助於!

+0

他的信息與他的內容沒有分離全部在textarea –

+0

他說:「我想抓住用戶輸入到該文本框中的內容並將其添加到我的第一句textarea「,這聽起來像是兩個組件是分開的,那現在你怎麼解釋Q? –

+0

但是他們也說他們只想修改第一句(這意味着當名稱改變時替換),這就是爲什麼我把對於更多信息的評論,這個問題沒有給出足夠的信息來真正確定OP所要求的內容 –

0

所以這是一個看似難以解決的問題,因爲您正在嘗試更新textarea文本的PART部分。 textarea裏面沒有任何結構,它只是「文本」。所以你問的是什麼類似於有一桶乒乓球,在其中之一寫一個名字,攪拌桶,然後告訴某人他們必須不斷用新的替換命名的球。

雖然有這樣做的方法,但它引發了一堆我懷疑你想回答的問題 - 如果他們刪除第一行呢?如果他們直接在textarea中更改他們的名字怎麼辦?如果他們在文本區域多次寫下他們的名字會怎麼樣?如果他們的瀏覽器使用自上而下寫入的語言會怎麼樣?

除非你準備好回答這些疑問(如果你是你應該可能會開始一個更具體的問題),我建議改變你的方法。例如,我懷疑你希望他們有能力改變第一行。因此,你可以在構造形式如下:

<form> 
    <label>First Name: <input class="first-name" /></label> 
    <label>Last Name: <input class="last-name" /></label> 
    <aside class="salutations">Dear <span class="first-name-salutation"></span></aside> 
    <textarea class="message"></textarea> 
</form> 

通知我搬到你投入的標籤(這是做不使用IDS的技術上是正確的方式),去掉了<br>標籤(你應該使用CSS這個),並將稱呼變成非用戶可編輯的文本。然後你的JavaScript可以簡單

$(function(){ 
    $('input.first-name').on('input', function(){ 
    $('.first-name-salutation').text($(this).text()); 
    }); 
}) 

然後在前面加上"Dear "+firstName線到服務器上的消息。

另外我會指出它不再是2009年了,沒有理由直接使用jquery來處理這樣的事情,當有優秀的框架,不會強迫你手動執行許多事情,如KnockoutAngular

+0

由於您正在編輯HTML,因此如果頁面上的其他輸入具有相同的類別,則最好通過ID引用而不是類別。 – rybo111

+0

@ rybo111我不同意。 ID應該僅保留用於您認識的事實的元素**是HTML規範強制要求的唯一頁面實例。有重複的ID時,許多工具將無法正常工作。我們是否知道這是頁面上的窗口小部件的唯一實例還是沒有使用類似語義的另一個窗口小部件?不,現在你說的肯定是我的代碼的一個問題,但我更喜歡unique-ish類,並且可能會在腳本的前面選擇DOM上下文,並將它用作第二個jquery參數 –

+0

您提出了一個關於重用代碼。我最初的想法是,ID對於初學者來說很容易引用,但靈活是一個很好的習慣。我已經更新了我的回答,以反映我們對此的討論。 – rybo111

0

請問您是否熟悉AJAX?如果是,那是最好的使用方法。

+0

試試這個請http://stackoverflow.com/questions/20086092/update-textarea-from-user-input-by-jquery-and-ajax。 –

相關問題