0

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

  • 内容文本字段：Samsung tv;
  • 上下文文本区域字段：Led Smart tv;
  • 自定义文本：check the price;

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

三星，电视，LED，智能，电视，检查，价格？

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

<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>
4

4 回答 4

0

变量 1 + "," + 变量 2 + "," + 变量。这就是你想要弄清楚的吗？

于 2013-03-07T13:35:21.227 回答
0

在你的更新功能中试试这个：

// replace
var myVal = elem.value
var regex = new RegExp(' ', 'g');
myVal = myVal.replace(regex,", ");
document.getElementById('textareaDescription').value = " check price for " + myVal ;
于 2013-03-07T13:39:00.713 回答
0

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

        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 ;
        }
于 2013-03-07T13:39:04.690 回答
0

虽然您已经接受了答案，但我想建议这个替代方案：

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 小提琴演示。

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

在var inputs = document.getElementsByTagName('input')我不能通过标签名而不是标签名来获取元素id？

当然可以。对于如何收集要采取行动的相关元素，您有多种选择；不过，在示例中，我只会将这些元素放入els变量中；因为那已经是传递给函数的那个​​了（但可以根据自己的代码进行调整）。

首先，使用document.getElementById()：

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

JS Fiddle 演示（注意删除了第一个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 小提琴演示。

第三，您当然可以使用类名（同样，使用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 小提琴演示。

最后，在改变主意之后；一种扩展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;
};

JS 小提琴演示。

它允许Array.indexOf()直接调用，而不是（如上所述）必须在不支持的浏览器中不必要地使用两个函数调用（并且每次都测试它的存在）来成功使用一个函数。

于 2013-03-07T14:04:10.960 回答