0

我正在尝试使用文本框创建一个动态表，但我希望每次编写时都将文本框转换为大写。

关于如何做到这一点的任何想法？

目前这是我做动态表的方式：

var n = 1;
function addRow(tableID,nroColumna) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    for(i=0;i<nroColumna;i++){

        var cell = row.insertCell(i);
        var element = document.createElement("input");
        element.type = "text";
        element.name = n+"0"+i;
        element.size = "12";
        element.id = n+"0"+i;

        //element.onkeyup = function(){alert()};
        cell.appendChild(element);
    }
    n++;
}

我试图做一个document.getElementById(element.id).value.toUpperCase()，但我收到一个错误，element.id 的值为空

任何帮助是极大的赞赏！

4

4 回答 4

2

如果您对非 JavaScript 解决方案感到满意，则可以将其CSS应用于您的输入：

text-transform: uppercase;

这将使文本从一开始就大写......

于 2013-03-04T14:57:09.313 回答
2

Darkajax 的解决方案有效，您可以将其定位到具有特定 ID 的表中的输入

和

#tableid input
{
    text-transform: uppercase;
}
于 2013-03-04T15:04:16.903 回答
1

我在激活 onkeyup 功能的情况下测试了您的代码：

var n = 1;
function addRow(tableID,nroColumna) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    for(i=0;i<nroColumna;i++){

        var cell = row.insertCell(i);
        var element = document.createElement("input");
        element.type = "text";
        element.name = n+"0"+i;
        element.size = "12";
        element.id = n+"0"+i;

        element.onkeyup = function(){alert(element.id);};
        cell.appendChild(element);
    }
    n++;
}

这奏效了。但是，它使用为每次调用函数计算的最后一个 element.id ......所以，当我创建一行 3 个单元格时，每次我输入一个单元格时，无论我输入哪个单元格，它都会提醒“102”在。

这是因为 onkeyup 函数是动态的。它在 keyup 操作上调用 - 在创建对象时未设置。所以它使用的是在操作时存在的 element.id 值，而不是你第一次传递它时的值。我希望这是有道理的。

我自己在最近的一个项目中遇到了这个问题。一种解决方案是为 for 循环的内部工作创建一个单独的函数，如下所示：

var n = 1;

function createRow (n, i) {
    var element = document.createElement("input");
    element.type = "text";
    element.name = n+"0"+i;
    element.size = "12";
    element.id = n+"0"+i;

    element.onkeyup = function(){alert(element.id);};

    return element;
}
function addRow(tableID,nroColumna) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    for(i=0;i<nroColumna;i++){
        var cell = row.insertCell(i);
        element = createRow(n, i);
        cell.appendChild(element);
    }
    n++;
}

此代码提醒正确的 element.id 值。

编辑：您可以将 onkeyup() 行更改为：

element.onkeyup = function(){document.getElementById(element.id).value = document.getElementById(element.id).value.toUpperCase();};

它应该按照您的意愿工作。

于 2013-03-04T15:27:21.970 回答
0

使用 jQuery 会像

$('.yourClass').val($(this).val().toUpperCase());

或者

$('#yourId').css({'text-transform' : 'uppercase'})
于 2013-03-04T15:09:00.570 回答