2013-08-08 2 views
2

У меня есть это поле ввода, которое создается в файле js, который в IE10 не принимает входные данные. Является ли это проблемой, которую я могу исправить? Арендная ставка и входные данные в квадратные метры - это те, которые не позволяют мне вводить число или текст.IE10 Поле ввода не принимает вход

<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))) 
     }); 
} 

ответ

2

Первые вещи сначала:

Если не синтаксис 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(); 

Несколько общих точек Re: JavaScript и использование JQuery, я надеюсь, вы не возражаете me overstepping:

  1. Eval is Evil. Вместо этого вы можете использовать $.parseJSON(string). Почему ты спрашиваешь? Well Eval может выполнять любой скрытый код, который кто-то вводил в ответ/переменную другими способами, тогда как parseJSON будет просто десериализовать данные. В противном случае вы могли бы быть заправлены как кипер.
  2. Ваш сценарий тяжелый синтаксис, почему бы не использовать более селекторов jQuery, увидев, что у вас есть $ (# idofelement), а не полный document.getElementById ("idofelement")? И .prop() & .data() вместо setAttribute()?
  3. Вы знаете, я думаю, вы могли бы сделать это более эффективно в целом с помощью шаблонов jQuery. См. here для руководства. Тогда это будет просто случай определения разметки строк, который вы хотите заранее, а затем примените к нему соответствующие данные JSON. Классический чехол для него, если вы спросите меня ...

Надеюсь, это не избиение для вас. Удачи с вашим приложением!

Смежные вопросы