title: input element disappears in IE(10) on backspace
body: <p>I have an <code>ASP.NET</code> page that loads a bunch of data from the db into a <code>ListView</code> with a <code>LayoutTemplate</code> and <code>ItemTemplate</code>. When the user hovers over a row, the last column switches its content for a textbox containing the same value, making it editable. This works in Chrome and now I almost got it to work in <code>IE10</code> as well.</p>
  
  <p>What issue remains, is that <strong>when backspacing in the textbox, the first keystroke seems to remove the textbox itself but leaves the content and a second keystroke renders both the textbox and the content invisible</strong>. Clicking inside the textbox renders it visible again and so does moving the mouse cursor outside the textbox area.</p>
  
  <p>I was unable to make a Snaggit of this, I tried.</p>
  
  <p>Sadly, the <a href="http://jsfiddle.net/wimombelets/sJGHD/" rel="nofollow"><strong>jsfiddle here</strong></a> does <strong>NOT</strong> reproduce the issue in <code>IE10</code> so, risking the old <em>wall of text</em>, I'm including the entire <code>ASP.NET Page</code> in the hopes that someone else can reproduce this and figure out what I have not been able to in two days. Don't worry, it's not huge. I've tested this code on another machine (using the same version of <code>IE10</code> as well) and the issue is identical.</p>
  
  <p>As usual: any insights into the why and how of this problem are appreciated.</p>
  
  <pre><code>&lt;%@ Page Title="EditInvoiceNumberFormat" Language="C#" MasterPageFile="~/myApplication.master" AutoEventWireup="true" CodeBehind="EditInvoiceNumberFormat.aspx.cs" Inherits="myApplication.EditInvoiceNumberFormat" %&gt;
  
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true"&gt;&lt;/asp:ScriptManager&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('input[id$="txtBoxInvoiceNumber"]').width($('span[id$="lblInvoiceNumber"]').closest('td').width() - 5);
  
          $('tr[id*="itemRow"]').mouseenter(function () {
              $clickedRow = $(this);
              var invNr = $clickedRow.find('span[id$="lblInvoiceNumber"]').text();
  
              //if the label/span is still visible
              if ($clickedRow.find('input[id$="txtBoxInvoiceNumber"]').is(':hidden')) {
                  //switch to edit mode
                  $clickedRow.find('span[id$="lblInvoiceNumber"]').hide();
                  $clickedRow.find('input[id$="txtBoxInvoiceNumber"]').show();
  
                  //copy over the value and focus the cursor
                  $clickedRow.find('input[id$="txtBoxInvoiceNumber"]').val(invNr).focus();
  
                  //if the value changes
                  $clickedRow.find('input[id$="txtBoxInvoiceNumber"]').on('input propertychange', function () {
                      //if the button was already visible, leave it that way
                      if ($clickedRow.find('input[id$="btnSaveInvNrFormat"]').is(':hidden')) {
                          $clickedRow.find('td[id$="SaveOption"]').show();
                          $clickedRow.find('input[id$="btnSaveInvNrFormat"]').show();
                      }
  
                      //but if it changes back to what it was within the same 'mouseenter' moment
                      if ($clickedRow.find('input[id$="txtBoxInvoiceNumber"]').val() == $clickedRow.find('span[id$="lblInvoiceNumber"]').text()) {
                          $clickedRow.find('td[id$="SaveOption"]').hide();
                          $clickedRow.find('input[id$="btnSaveInvNrFormat"]').hide();
                      }
                  });
              }
          });
  
          $('tr[id*="itemRow"]').mouseleave(function () {
              $rowLosingFocus = $(this);
  
              //if the save button isn't visible
              if ($rowLosingFocus.find('input[id$="btnSaveInvNrFormat"]').is(':hidden')) {
                  $rowLosingFocus.find('span[id$="lblInvoiceNumber"]').text($rowLosingFocus.find('input[id$="txtBoxInvoiceNumber"]').val()).show();
                  $rowLosingFocus.find('input[id$="txtBoxInvoiceNumber"]').hide();
              }
          });
  
          //prevent page postback on button click
          $('input[id$="btnSaveInvNrFormat"]').click(function (e) {
              e.preventDefault();
              //update the value to the db
              UpdateInvoiceNrFormat($(this));
          });
  
          //prevent postback on enter
          $('input[id$="txtBoxInvoiceNumber"]').on('keydown', function (e) {
              if (e.keyCode == 13) { //if 'enter' key
                  e.preventDefault();
                  return false;
              }
              else return true;
          });
  
          //prevent backspace to navigate back
          var rx = /INPUT|SELECT|TEXTAREA/i;
  
          $(document).bind("keydown keypress", function (e) {
              if (e.which == 8) { // 8 == backspace
                  if (!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly) {
                      e.preventDefault();
                  }
              }
          });
      });
  
      function UpdateInvoiceNrFormat(leButton) {
          $buttonClicked = $(leButton);
          //$buttonClicked.focus();
          $closestRow = $buttonClicked.closest('tr');
  
          $saveResultMsg = $closestRow.find('span[id$="SaveResultMsg"]');
  
          var invNrFormat = $closestRow.find('input[id$="txtBoxInvoiceNumber"]').val(),
              companyName = $closestRow.find('span[id$="lblCompanyName"]').text(),
              invoiceType = $closestRow.find('span[id$="lblInvoiceType"]').text();
  
          //page method that actually updates the value to the db
          PageMethods.UpdateInvoiceNumberFormat(companyName, invoiceType, invNrFormat, onSuccess, onError);
  
          function onSuccess(result) {
              $buttonClicked.hide();
              $closestRow.find('span[id$="SaveResultMsg"]').text(result).show().fadeOut(1500, function () {
                  $(this).hide();
                  $(this).closest('td').hide();
              });
          }
          function onError(result) {
              $buttonClicked.hide();
              $closestRow.find('span[id$="SaveResultMsg"]').text('Error:' + result).show();
          }
      }
  &lt;/script&gt;
      &lt;asp:ListView ID="InvoiceNumberFormatList" runat="server"&gt;
          &lt;LayoutTemplate&gt;
              &lt;div runat="server" class="AltRow"&gt;
                  &lt;p&gt;Select a row to edit the invoice number format.&lt;/p&gt;
                  &lt;table id="InvoiceNumberFormatTable" runat="server"&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Company Name&lt;/th&gt;
                          &lt;th&gt;Invoice Type&lt;/th&gt;
                          &lt;th&gt;Invoice Number Format&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;tr id="itemPlaceholder" runat="server"&gt;&lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/LayoutTemplate&gt;
          &lt;ItemTemplate&gt;
              &lt;tr id="itemRow" runat="server"&gt;
                  &lt;td style="padding:6px"&gt;
                      &lt;asp:Label ID="lblCompanyName" runat="server" Text='&lt;%# Bind("CompanyName") %&gt;' /&gt;
                  &lt;/td&gt;
                  &lt;td style="padding:6px"&gt;
                      &lt;asp:Label ID="lblInvoiceType" runat="server" Text='&lt;%# Bind("InvoiceType") %&gt;' /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="lblInvoiceNumber" runat="server" Text='&lt;%# Bind("InvoiceNumber") %&gt;' /&gt;
                      &lt;asp:TextBox ID="txtBoxInvoiceNumber" runat="server" style="display:none"&gt;&lt;/asp:TextBox&gt;
                  &lt;/td&gt;
                  &lt;td id="SaveOption" style="display:none"&gt;
                      &lt;asp:Button ID="btnSaveInvNrFormat" runat="server" Text="Save" /&gt;
                      &lt;span id="SaveResultMsg"&gt;&lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/ItemTemplate&gt;
      &lt;/asp:ListView&gt;
  
      &lt;div id="EditWindow" title="Edit Invoice Number Format"&gt;
  
      &lt;/div&gt;
  &lt;/asp:Content&gt;
  </code></pre>