Question

我正在处理具有一定数量的Dojo textarea元素的页面。

                <textarea readonly class="readTextBox versionText"></textarea>

这些元素的数量不止一个。我正在尝试添加javascript函数或textarea的格式。该函数为textarea元素提供了一定的行数。脚本是：

 <script type="application/javascript">
    window.onload=function() {
        var versionElement = document.getElementsByClassName("versionText");
        console.log("length:" + versionElement.length);
        var versionElementText = versionElement.value;

        var lines = versionElementText.split(/\r\n|\r|\n/);
        var rowCount = 0;
        for(var line=0;line<lines.length;line++) {
            rowCount += Math.ceil(lines[line].length/82);
        }
        versionElement.rows=rowCount;
    }

问题是，我无法为所有textarea元素添加它。我只是想获得一个textarea元素。

我尝试过Windo.onload，我仍然将textarea元素计数为1. JS片段也放在页面的最底部。

调用textarea的父文件是：

<div class="box-content">
<div id="pnl_{$id}">
{foreach from=$version item=version name=version}
        {assign var=textBoxes value=$version->textBoxes}
    <div data-dojo-type="dijit.TitlePane>
     {include file="addTextArea.tpl"}
    </div>
{/foreach}
</div>
</div>

生成的HTML如下所示：

<div class="box-content">
<div id="productPanel_80920">
<div data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Version 4 <span class=versionDate>2014-01-16 15:35:21</span>'">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody>
            <tr>
                <td class="tableCell">
                    <textarea readonly class="readTextBox versionText" style="resize: none; outline: none; word-wrap: break-word;" spellcheck="true">   random text
                    </textarea>
                </td>
            </tr>
        </tbody>
</table>        
</div>
<br class="box-divider"/>
<div data-dojo-type="dijit.TitlePane" data-dojo-props="href:'addTextArea.html?id=4059&version=3', title:'Version 3 <span class=versionDate>2014-01-10 14:52:46</span>',open:false"></div>
<br class="box-divider"/>
<div data-dojo-type="dijit.TitlePane" data-dojo-props="href:'addTextArea.html?id=4059&version=2', title:'Version 2 <span class=versionDate>2014-01-10 14:48:09</span>',open:false"></div>
<br class="box-divider"/>
<div data-dojo-type="dijit.TitlePane" data-dojo-props="href:'addTextArea.html?id=4059&version=1', title:'Version 1 <span class=versionDate>2014-01-10 14:47:41</span>',open:false"></div>
<br class="box-divider"/>

每当我点击div时，就会填充textarea。

Answer 1

首先，正确的HTML就是这个（你错过了一个结束>）：

<textarea readonly class="readTextBox versionText"></textarea>

第二关，document.getElementsByClassName返回nodeList，就像一个数组。您必须遍历nodeList中的每个DOM元素才能对所有textarea元素进行操作。

我不确定我确切地知道你要做什么，但是转换你的代码来执行你在每个textarea返回的代码的操作，它会是这样的：

window.onload=function() {
    var items = document.getElementsByClassName("versionText");
    for (var i = 0; i < items.length; i++) {
        var versionElement = items[i];
        var versionElementText = versionElement.value;

        var lines = versionElementText.split(/\r\n|\r|\n/);
        var rowCount = 0;
        for(var line=0;line<lines.length;line++) {
            rowCount += Math.ceil(lines[line].length/82);
        }
        versionElement.rows=rowCount;
    }
}

Answer 2

var objs=document.getElementsByTagName('textarea');
for (var i=0;i<objs.length;i++){
  var obj=objs[i];
  if (!obj.className||obj.className!='versionText') continue;

  //do your transformation here
}

使用Javascript修改所有DOM元素

2 个答案: