如何向动态表中的每个文本框添加UpperCase函数

How to add an UpperCase function to each textbox in a dynamic table?

本文关键字：文本 添加 函数 UpperCase 动态      更新时间：2023-09-26

我正在尝试创建一个动态表格的文本框，但我希望文本框转换为大写，每次我写。

有什么好主意吗??

目前我是这样做动态表的:

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()，但我得到一个错误与一个空值的元素。id

任何帮助都非常感谢!

如果您对非JavaScript解决方案满意，您可以将此CSS应用于您的输入:

text-transform: uppercase;

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

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

#tableid input
{
    text-transform: uppercase;
}

我测试了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++;
}

那起作用了。但是，它使用最后一个元素。每次调用函数都会计算Id…所以，当我创建一行3个单元格时，每次我输入一个单元格，它都会提示"102"，不管我输入的是哪个单元格。

这是因为onkeyup函数是动态的。它在keyup操作时被调用，而不是在创建对象时设置。所以它使用元素。在动作发生时存在的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++;
}

此代码提醒正确的元素。id值。

编辑:你可以修改onkeyup()行为: 
element.onkeyup = function(){document.getElementById(element.id).value = document.getElementById(element.id).value.toUpperCase();};

它应该是你想要的效果

如果使用jQuery，效果会是

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

或

$('#yourId').css({'text-transform' : 'uppercase'})
相关文章：