將複選框值添加/刪除到TextArea

我搜索了該網站，並找到了一些示例，但接近但不夠接近。我有2個複選框，如果用戶檢查他們，他們被放置在textarea，如果用戶刪除檢查。該值被刪除。我想保持光標位置。將複選框值添加/刪除到TextArea

我可以添加，但它仍然笨重。

這裏是我的代碼

測試。來自另一個字段的值將插入此處。

<form> 

      <p>Favorite Color <label><input type="checkbox" value="Green" />Green</label> 
    <label><input type="checkbox" value="Red" />Red</label></p> 
    </form> 


var textarea = document.getElementById("myTextArea1"); 
    // $('input[type=checkbox]').click(function() { 
    $('input[type=checkbox]').change(function() { 
    var $parentForm = $(this).closest("form"); 

// var text = $(".insert-text", $parentForm).val(); 
    var text = $('input[type=checkbox]:checked').val() + " "; 

// var text = $('input[type=checkbox]:checked', $parentForm).val() + " "; 

    insertAtCursor(textarea, text); 
    }); 

function insertAtCursor(myField, myValue) { 
    if (document.selection) { 
    myField.focus(); 
    sel = document.selection.createRange(); 
    sel.text = myValue; 
} 

else if (myField.selectionStart || myField.selectionStart == '0') { 
    var startPos = myField.selectionStart; 
    var endPos = myField.selectionEnd; 
    myField.value = myField.value.substring(0, startPos) + myValue +   myField.value.substring(endPos, myField.value.length); 
    } 
else { 
    myField.value += myValue; 
    } 
} 
;

任何幫助，將不勝感激。

來源

2012-03-19 Michael Hahn

不知道究竟你正在做什麼，但似乎你有點困惑。

嘗試像

$('input[type=checkbox]').change(function() { 
    if ($(this).is(':checked')) { 
     var text = $(this).val() + " "; 
     insertAtCursor(textarea, text);  
    } 
});

來源

2012-03-19 17:11:08 Dutchie432

非常接近。我只需要複選框刪除，如果它沒有選中，並很好。我可以繼續點擊複選框，並繼續添加，我需要刪除試圖想到你的解決方案的邏輯 – 2012-03-19 17:23:40

，而它沒有刪除，光標保持位置，並添加複選框的值完美。 – 2012-03-19 22:31:23

我想你會自己開車瘋狂試圖對待textarea喜歡你。你可以很容易地預先確定顏色，但是當用戶不檢查它們時你會做什麼？例如，如果他們檢查綠色，然後是紅色，然後取消檢查綠色怎麼辦？現在不再是從textarea中刪除5個字符的簡單問題。

如果我理解你的應用程序，不過，你在textarea結合來自不同領域的價值，所以我會做這樣的事情：

function updateTextArea() { 
    var text = ""; 
    $('input[type=checkbox]:checked').each(function() { 
    text += $(this).val() + " "; 
    }); 
    $('input[type=text]').each(function() { 
    text += $(this).val() + " "; 
    }); 
    $('#myTextArea1').val(text); 
}

然後，你可以調用這個時候每次你值變化。例如，當用戶改變的其中一個複選框：

$('input[type=checkbox]').change(function() { 
    updateTextArea(); 
});

我相信，這將是比你勾勒的方法更清潔。你可以在這裏看到它：http://jsfiddle.net/8y4D8/19/

另外，你可以考慮使用Backbone.js（http://documentcloud.github.com/backbone/）或者一些類似的Javascript MVC框架。

來源

2012-03-19 17:30:01

即時通訊只是使用這個Twitter的文本框，他們將檢查框添加一個特定的標籤，在那裏永遠在那裏的狀態消息。我用顏色來簡化示例。讓我看看我是否可以讓光標部分現在工作，我很好 – 2012-03-19 18:00:11

將複選框值添加/刪除到TextArea

回答

相關問題