Question

有没有办法从文本字段，textarea字段和一些自定义文本中选择内容，组合所有内容并自动更新textarea字段与该内容，但是用逗号分隔的单词如下：

内容文字字段：Samsung tv;
context textarea字段：Led Smart tv;
自定义文字：check the price;

结果：textarea字段将自动更新：

三星，电视，领导，智能，电视，支票，价格？

我有这段代码将内容从文本更新到textarea但我不知道如何在每个单词后面加上逗号：

<script type="text/javascript">
            function update(elem) { 
                document.getElementById('textareaDescription').value = " check price for " + elem.value ;  
            }
        </script>
Text: <input type="text" onchange="update(this)">
        <br>
        Textarea auto update : <textarea name="" id="textareaDescription" cols="30" rows="10"></textarea>

Answer 1

variable1 +“，”+ variable2 +“，”+ variablenth。这是你想要弄清楚的吗？

Answer 2

在更新功能中尝试此操作：

// replace
var myVal = elem.value
var regex = new RegExp(' ', 'g');
myVal = myVal.replace(regex,", ");
document.getElementById('textareaDescription').value = " check price for " + myVal ;

Answer 3

您必须修改更新功能，如下所示

        function update(elem) { 
          var tosplit = "check price for " + elem.value ;
           //Get another field value, replace anotherfieldid with your actual field
           //You can add any number of fields like this. 
            var anotherfield =  document.getElementById('anotherfieldid').value 
            tosplit =  tosplit+anotherfield; 
          var text =tosplit.split(" ");
          document.getElementById('textareaDescription').value = text ;
        }

Answer 4

虽然您已经接受了答案，但我想建议一下这个选择：

function updateValue(els, output){
    // creates an empty array
    var textArray = [];

    /* iterates through the `els` array and if the value is not
       an empty string, splits the value at the white-spaces
       and pushes the array of values to the `textArray` */
    for (var i=0,len=els.length; i<len; i++){
        if (els[i].value !== ''){
            textArray.push(els[i].value.split(/\s/));
        }
    }

    /* makes the value of the `output` (textarea) equal to the 
       comma-separated string of words from the inputs, and
       adds a full-stop/period to the end of the 'sentence' */
    output.value = textArray.join(',') + '.';
}

var inputs = document.getElementsByTagName('input'),
    output = document.getElementById('result'),
    els = [];

// makes an array from the `inputs` nodeList 
for (var i = 0, len = inputs.length; i<len; i++) {
    els.push(inputs[i]);
}

// assigns the function to call
for (var i = 0, len = els.length; i<len; i++) {
    els[i].onkeyup = function(e){
        updateValue(els, result);
    };
}

JS Fiddle demo

已编辑以解决OP留下的问题（在下面的评论中）：

在var inputs = document.getElementsByTagName('input')我无法通过id获取元素，而不是标记名称？

当然可以。关于如何收集您想要采取行动的相关要素，您有很多选择;在示例中，我只是将这些元素放入els变量中;因为那已经是传递给函数的那个（但是在你自己的代码中调整了味道）。

首先，使用document.getElementById()：

var els = [document.getElementById('one'),document.getElementById('two')];

JS Fiddle demo（请注意删除第一个for循环，该循环用于将相关节点推送到els数组中。

其次，您可以使用数组来包含您想要采取行动的那些元素的id：

/* not every browser has access to `indexOf()` for arrays, so an
   alternative is defined */

function inArray(needle,haystack) {
    // use native version if possible:
    if ([].indexOf !== undefined){
        return haystack.indexOf(needle);
    }
    // otherwise use custom approach:
    else {
        for (var i=0,len=haystack.length; i<len; i++){
            if (needle == haystack[i]){
                return i;
            }
        }
        return -1;
    }
}

var inputs = document.getElementsByTagName('input'),
    output = document.getElementById('result'),
    // array of the `id`s of the elements you want to use:
    elementIdsToUse = ['one','two'],
    els = [];

for (var i = 0, len = inputs.length; i<len; i++) {
    // if the `inputs[i]` node's `id` is in the array of `id`s...
    if (inArray(inputs[i].id,elementIdsToUse) > -1){
        // push that node to the `els` array:
        els.push(inputs[i]);
    }
}

for (var i = 0, len = els.length; i<len; i++) {
    els[i].onkeyup = function(e){
        updateValue(els, result);
    };
}

JS Fiddle demo

第三，你当然可以使用类名（再次使用indexOf()）：

for (var i = 0, len = inputs.length; i<len; i++) {
    if (inputs[i].className.indexOf('useThis') > -1){
        els.push(inputs[i]);
    }
}

for (var i = 0, len = els.length; i<len; i++) {
    els[i].onkeyup = function(e){
        updateValue(els, result);
    };
}

JS Fiddle demo

最后，在改变主意之后;扩展Array原型的方法，如果当前浏览器中不存在Array.indexOf()方法，则提供Array.prototype.indexOf = Array.prototype.indexOf || function(needle) { for (var i = 0, len = this.length; i<len; i++){ if (this[i] == needle){ return i; } } return -1; };方法：

Array.indexOf()

JS Fiddle demo

允许直接调用{{1}}，而不是（如上所述）在不支持的浏览器中不必要地使用两个函数调用（并且每次测试它的存在 < / em>）成功使用一个函数。

使用javascript从text和textarea字段内容制作标签

4 个答案: