【问题标题】:Make tags from text and textarea fields content with javascript使用 javascript 从 text 和 textarea 字段内容制作标签
【发布时间】:2013-02-22 17:25:08
【问题描述】:

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

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

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

三星、电视、Led、Smart、电视、支票、价格?

我有这段代码可以将内容从文本更新到 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>

【问题讨论】:

    标签: javascript text tags textarea auto-update


    【解决方案1】:

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

    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 留下的问题(在 cmets 中,如下):

    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;
    };
    

    JS Fiddle demo.

    这允许直接调用Array.indexOf(),而不是(如上)在不支持的浏览器中不必要地使用两个函数调用(并测试它的存在每次) 成功使用一个功能。

    【讨论】:

    • 你真的很受欢迎;很高兴能帮到你:)
    • var inputs = document.getElementsByTagName('input') 我不能通过id而不是标签名来获取元素?因为我只想从某些字段(例如 textarea)中获取内容。
    • 确实可以;查看一些选项/替代方案的编辑。
    • 再次感谢您 :) 现在完美了!
    • 不客气;请参阅上次更新,了解为尚未实现此类功能的浏览器提供 Array.indexOf() 的稍微修改的方法。
    【解决方案2】:

    variable1 + "," + variable2 + "," + variablenth。 这就是你想要弄清楚的吗?

    【讨论】:

    • 是的,就像那样.. 变量是文本字段内容中的一个单词。我只想从文本字段中获取内容并用逗号分隔每个单词,然后将其放入文本区域。我想在我做到这一点之后,我会设法完成其余的工作。
    【解决方案3】:

    在你的更新函数中试试这个:

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

    【讨论】:

    • 这段代码没有在自定义文本中放逗号,只在myVal中,但是谢谢!
    • 我想我现在可能误解了你的问题 - 你说你想把“检查价格”也用逗号分隔?
    • 没错。 Samy 的代码有效.. 但现在我需要弄清楚如何从更多文本和文本区域字段中获取内容。
    【解决方案4】:

    你必须像下面这样修改你的更新功能

            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 ;
            }
    

    【讨论】:

    • 谢谢!这行得通!知道如何从 2 个或更多字段中获取 elem.value 吗?
    • 现在有一个问题:我在文本字段中输入了一些文本,然后 textareaDescription 更新正常.. 但是当我在 anotherfieldid 中输入一些文本时,没有任何反应.. 如果我从文本字段中删除内容, textareaDescription 更新为 anotherfieldid 内容和自定义文本。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-23
    • 1970-01-01
    • 1970-01-01
    • 2012-03-03
    相关资源
    最近更新 更多