javascript - IE10输入框不接受输入

Question

我在一个 js 文件中创建了这个输入框，在 IE10 中不接受输入。这是我可以解决的 ie 问题吗？租金和平方英尺输入是不允许我输入任何数字或文本的。

<div id="POItablediv" class="hideDynamicTableClass add-table" data-property-type="Commercial" style="clear: left;"> 
                    @*<input type="button" onclick="tableToJson('CommercialTable');" value="Get JSON Commercial Data" />*@
                    <p><span class="lb1"></span><input type="button" id="add" value="Add" onclick="insCommercialRow()"/></p>
                    <table id="CommercialTable">
                    <tr>
                    <!--<td>Sno</td>-->
                    <td id="TypeOfSpace">Type Of Space</td>
                    <td id="SquareFeet">Square Footage</td>
                    <td id="Occupancy">Occupancy</td>
                    <td id="TenantName">Tennant Name</td>
                    <td id="RentalRate">Rental Rate</td>
                    <td id="LeaseLength">Lease Length</td>
                    </tr>
                    </table>

                @Html.DropDownList("filterDomain", OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("CommercialSpace", "-1", false), new { @id = "CommercialTypeOfSpace", @style = "display:none;" })
                @Html.DropDownList("filterDomain", OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("NumberOfAmenities", "-1", false), new { @id = "OtherDynamicBeds", @style = "display:none;" })
                @Html.DropDownList("filterDomain", OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("NumberOfAmenities", "-1", false), new { @id = "OtherDynamicBaths", @style = "display:none;" })
                @Html.DropDownList("filterDomain", OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("NumberOfAmenities", "-1", false), new { @id = "OtherDynamicGarage", @style = "display:none;" })
                @Html.DropDownList("filterDomain", OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("CaseOccupant", "-1", false), new { @id = "OtherDynamicOccupied", @style = "display:none;" })
                @Html.DropDownList("filterDomain", OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("CaseOccupant", "-1", false), new { @id = "CommercialOccupancy", @style = "display:none;" })
            @*    @(Html.Telerik().CurrencyTextBox()
                        .Name("CommercialRentalRate")
                        .InputHtmlAttributes(new {id ="CommercialRentalRate" ,style="width:100% display :none!important", placeholder="$"})
                        //.MinValue(0)       

                        .Spinners(false)       
                        .EmptyMessage(string.Empty)
              )*@
                </div>

这是创建输入框的 javascript。

function fillSellerLeadHandlers() {
    //Use the JSON string on the commercial and the other one to render table
    var dataObj = eval(($("#commercialUnitString").val()));   
    var commTable = document.getElementById('CommercialTable');
    var dynaTable = document.getElementById('DynamicTable');

    if (!isEmpty($("#commercialUnitString").val()))
    {
        $.each(dataObj, function (idx, val) {
            var len = commTable.rows.length;
            var new_row = commTable.insertRow(len);
            //Assign different attributes to the element.
            var cell0 = new_row.insertCell(0) //Type Of Space -- DD
            $('select#CommercialTypeOfSpace').clone().attr('style', 'display:block').attr('id', "id" + len + "0").attr('value', val.TypeOfSpace).appendTo(cell0);
            //cell0.appendChild(createElement("text", "id" + len + "0", val.TypeOfSpace));

            var cell1 = new_row.insertCell(1) //Squarefeet
            var element1 = createElement("text", "id" + len + "1", val.SquareFeet);
            element1.setAttribute('class', "numeric");
            cell1.appendChild(element1);

            var cell2 = new_row.insertCell(2)//Occupancy -- DD
            //cell2.appendChild(createElement("text", "id" + len + "2", val.Occupancy));           
            $('select#CommercialOccupancy').clone().attr('style', 'display:block').attr('id', "id" + len + "2").attr('value', val.Occupancy).appendTo(cell2);

            var cell3 = new_row.insertCell(3)//Tenant Name
            cell3.appendChild(createElement("text", "id" + len + "3", val.TenantName));

            var cell4 = new_row.insertCell(4)//Rental Rate
            var element = createElement("text", "id" + len + "4", val.RentalRate);
            element.setAttribute('class', "numeric");
            element.setAttribute('data-val', 'true');
            element.setAttribute('data-val-number', 'Rental Rate needs to be a number');
            element.setAttribute('placeholder', '$');
            //element.attributes['data-val'] = 'true';
            //element.attributes['data-val-number'] = 'Rental Rate needs to be number.';
            cell4.appendChild(element);

            var cell5 = new_row.insertCell(5)//Lease Length
            cell5.appendChild(createElement("text", "id" + len + "5", val.LeaseLength));
            var element = createElement("button", "id", len + "6", "X");
            element.setAttribute("value", "X");
            element.onclick = function () { // Note this is a function
                deleteRow(this, 'CommercialTable');
            };
            var cell6 = new_row.insertCell(6)
            cell6.appendChild(element);

            commTable.appendChild(new_row);
        });
    }
    //Other tables
        var dataObj = eval(($("#otherDynamicSettingsString").val()));      
        if (!isEmpty($("#otherDynamicSettingsString").val()))
          {  $.each(dataObj, function (idx, val) {
                var len = dynaTable.rows.length;
                var new_row = dynaTable.insertRow(len);

                var cell0 = new_row.insertCell(0)
                cell0.appendChild(createElement("text", "id" + len + "0", val.NumOfUnits));

                var cell1 = new_row.insertCell(1) //Beds - DD
                //cell1.appendChild(createElement("text", "id" + len + "1", val.Bedroom));            
                $('select#OtherDynamicBeds').clone().attr('style', 'display:block').attr('id', "id" + len + "1").attr('value', val.Bedroom).appendTo(cell1);

                var cell2 = new_row.insertCell(2)//Baths --DD
                //cell2.appendChild(createElement("text", "id" + len + "2", val.Bathrooms));
                $('select#OtherDynamicBaths').clone().attr('style', 'display:block').attr('id', "id" + len + "2").attr('value', val.Bathrooms).appendTo(cell2);

                var cell3 = new_row.insertCell(3)//Square Footage
                var element1 = createElement("text", "id" + len + "3", val.SquareFeet)
                element1.setAttribute('class', "numeric");
                cell3.appendChild(element1);

                var cell4 = new_row.insertCell(4)//Rental Rate
                var element1 = createElement("text", "id" + len + "4", val.RentalRate);
                element1.setAttribute('class', "numeric");
                element1.setAttribute('placeholder', '$');
                cell4.appendChild(element1);

                var cell5 = new_row.insertCell(5)//Garage - DD
                //cell5.appendChild(createElement("text", "id" + len + "5", val.Garage));
                $('select#OtherDynamicGarage').clone().attr('style', 'display:block').attr('id', "id" + len + "5").attr('value', val.Garage).appendTo(cell5);

                var cell6 = new_row.insertCell(6) //Occupied - DD
                //cell6.appendChild(createElement("text", "id" + len + "6", val.Occupied));
                $('select#OtherDynamicOccupied').clone().attr('style', 'display:block').attr('id', "id" + len + "6").attr('value', val.Occupied).appendTo(cell6);

                var element = createElement("button", "id", len + "7", "X");
                element.setAttribute("value", "X");
                element.onclick = function () { // Note this is a function
                    deleteRow(this, 'DynamicTable');
                };
                var cell7 = new_row.insertCell(7)
                cell7.appendChild(element);

                dynaTable.appendChild(new_row);
            });
        }
        $(".numeric").keypress(function () {
            return (/\d/.test(String.fromCharCode(event.which)))
        });
}

Answer 1

要事第一:

createElement 的语法不应该遵循以下几行(注意输入标记的显式集)，或者您是否创建了自己的同名方法来为您执行此操作？

var cell1 = new_row.insertCell(1); //Squarefeet
var element1 = createElement("input");
element1.setAttribute("id", "id" + len + "1");
element1.setAttribute("type", "text");
element1.setAttribute("class", "numeric");
element1.value = val.SquareFeet;
cell1.appendChild(element1);

其次，您的数字事件，我认为是您的问题。这是我不久前写的一个纯数字插件:

(function ($) {
    $.fn.onlynumeric = function () {
        $(this).keyup(function (event) {
            if (event.keyCode != 8) {
                $(this).val($(this).val().replace(/\D/g, ""));
            }
        });
    };
} (jQuery));

并将其应用于:

$("input.numeric").onlynumeric();

关于 JavaScript 和 jQuery 的使用的一些一般要点，希望您不介意我越界:

1. Eval 是邪恶的。你可以使用 $.parseJSON(string)反而。你为什么问？ Eval 可以执行任何人通过其他方式注入(inject)响应/变量的隐藏代码，而 parseJSON 只会反序列化数据。否则你可能会像一条腌鱼一样藏起来。
2. 您的脚本语法繁重，为什么不使用更多 jQuery 选择器，因为您包含 $(#idofelement) 而不是完整的 document.getElementById("idofelement")？和 .prop() & .data()而不是 setAttribute()？
3. 你知道，我认为使用 jQuery 模板通常可以更有效地完成这项工作。参见 here寻求指导。然后，只需预先定义您想要的行标记，然后将相关的 JSON 数据应用于它即可。经典案例，如果你问我...

我希望这不是对你的打击。祝您的应用程序好运!