的Javascript文字輸入（+複選框選項）和文本輸出可以輕鬆地按Ctrl + C

最接近的現有線程我能找到這裏是這個： How can I output multiple text fields to one page 的Javascript文字輸入（+複選框選項）和文本輸出可以輕鬆地按Ctrl + C

它是一個類似的想法。基本上我的目標是允許多個輸入（文本，複選框等），然後輸出到一個簡單的文本字段中，該字段最好自動複製到剪貼板中，但它不一定非常花哨，只要它很容易就可以複製並粘貼到別處。

背景：在工作中，我們有一個命名約定，我們用它來創建契約，它們遵循相同的格式，但是如果我們可以輕鬆地打入相同的字段並檢查某些產品，然後輸出要複製的文本粘貼，它會讓生活變得更容易。

我正在處理那些輸入你的名字，然後輸出「你好10無論你輸入！」！腳本，也看着瘋狂的lib JavaScripts，因爲它們是相同的想法減去複選框...但我卡住了。我是一個JavaScript新手，所以我不知道如何正確地合併多個文本框和複選框選項輸出到一行文本（這將是一個很好的功能類似於那些優惠券網站像零售店，你只需點擊進入它和它自動按Ctrl + C爲你）

所以使用上述作爲一個起點，我的想法是，

1）凡說，鍵入您的姓名（文本框），那就得這些領域的約5 2）4組多選複選框與最後一個複選框的文本字段相當於「其他」 3）然後一旦按鈕被點擊，我希望它輸出一個特定的文本字符串基於上述字段用戶在文本框中輸入（text1）（text2）（text3）_etc

是否存在已檢查的複選框選項（包括添加「其他」字段（如果適用））：將所有這些輸入鏈接在一起任何現有的代碼，這個教程的鏈接或如何修改示例javascript來完成這樣的事情的說明？ 注意：我是一個JavaScript的新手

謝謝！

來源

2015-08-09 nifty

我之前創建了這個簡單的腳本。這是你在追求什麼？

Working Fiddle

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    First Name : 
    <input type="text" name="fName" /> 
    <br>Last Name : 
    <input type="text" name="lName" /> 
    <br>Gender : 
    <input type="radio" name="gender" value="male" />Male 
    <input type="radio" name="gender" value="female" />Female 
    <br>Occupation : 
    <select name="occ"> 
     <option value="carpenter">Carpenter</option> 
     <option value="engineer">Engineer</option> 
     <option value="doctor">Doctor</option> 
    </select> 
    <br>Pref : 
    <input type="checkbox" name="one" />One 
    <input type="checkbox" name="two" />Two 
    <br> 
    <textarea id="result"></textarea> 
    <br> 
    <button id="submitBtn">Submit</button> 
    <div id="message" style="color:red"></div>

jQuery的

$("#submitBtn").click(function() { 
    var firstName = $("input[name=fName]").val(); 
    var latName = $("input[name=lName]").val(); 
    var gender = $("input[name=gender]:checked").val(); 
    var occ = $("select[name=occ]").val(); 
    var pref1 = $("input[name=one]").is(":checked"); 
    var pref2 = $("input[name=two]").is(":checked"); 
    $("#result").val(firstName + " " + latName + " " + gender + " " + occ + " " + pref1 + " " + pref2); 
    $('#result').focus(function() { 
     this.select(); 
     document.execCommand("copy"); 
     $("#message").html("Text copied to clipboard!"); 
    }).mouseup(function() { 
     return false; 
    }); 
    $('#result').focus(); 
});

來源

2015-08-09 05:42:18 arunatebel

的Javascript文字輸入（+複選框選項）和文本輸出可以輕鬆地按Ctrl + C

回答

相關問題