0

テキストフィールド、textareaフィールド、およびいくつかのカスタムテキストからコンテンツを選択し、すべてのコンテンツを組み合わせて、textareaフィールドをそのコンテンツで自動更新する方法はありますが、単語は次のようにカンマで区切ります。

  • コンテンツテキストフィールド：Samsung tv;
  • コンテキストテキストエリアフィールド：Led Smart tv;
  • カスタムテキスト：check the price;

結果：textareaフィールドは次のように自動更新されます：

サムスン、テレビ、LED、スマート、テレビ、チェック、、価格？

コンテンツをテキストから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>
4

4 に答える 4

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 フィドルのデモ。

3 番目に、もちろん、クラス名を使用できます (再度、 を使用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 フィドルのデモ。

これにより、(上記のように) 1 つの関数を正常に使用するために、サポートされていないブラウザーで2 つの関数呼び出しを不必要に使用する (そして毎回Array.indexOf()その存在をテストする) のではなく、直接呼び出すことができます。

于 2013-03-07T14:04:10.960 に答える
0

variable1 + "," + variable2 + "," + variablenth. それはあなたが理解しようとしていることですか？

于 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 に答える