我有一个ASP.NET页面，可以将数据库中的一堆数据加载到ListView带有 aLayoutTemplate和的 a 中ItemTemplate。当用户将鼠标悬停在一行上时，最后一列将其内容切换为包含相同值的文本框，使其可编辑。这可以在 Chrome 中使用，现在我几乎也可以使用它了IE10。
仍然存在的问题是，在文本框中退格时，第一次击键似乎删除了文本框本身，但留下了内容，第二次击键使文本框和内容都变得不可见。在文本框内单击使其再次可见，将鼠标光标移出文本框区域也是如此。
我无法做到这一点，我试过了。
可悲的是，这里的 jsfiddle并没有重现问题，IE10因此冒着旧文本墙的风险，我将整个内容包括在内，ASP.NET Page希望其他人可以重现这一点并弄清楚我在两天内无法做到的事情。别担心，它不是很大。我已经在另一台机器上测试了这段代码（也使用相同的版本IE10）并且问题是相同的。
像往常一样：感谢任何有关此问题的原因和方式的见解。
<%@ Page Title="EditInvoiceNumberFormat" Language="C#" MasterPageFile="~/myApplication.master" AutoEventWireup="true" CodeBehind="EditInvoiceNumberFormat.aspx.cs" Inherits="myApplication.EditInvoiceNumberFormat" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<script type="text/javascript">
$(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();
}
}
</script>
<asp:ListView ID="InvoiceNumberFormatList" runat="server">
<LayoutTemplate>
<div runat="server" class="AltRow">
<p>Select a row to edit the invoice number format.</p>
<table id="InvoiceNumberFormatTable" runat="server">
<tr>
<th>Company Name</th>
<th>Invoice Type</th>
<th>Invoice Number Format</th>
<th></th>
</tr>
<tr id="itemPlaceholder" runat="server"></tr>
</table>
</div>
</LayoutTemplate>
<ItemTemplate>
<tr id="itemRow" runat="server">
<td style="padding:6px">
<asp:Label ID="lblCompanyName" runat="server" Text='<%# Bind("CompanyName") %>' />
</td>
<td style="padding:6px">
<asp:Label ID="lblInvoiceType" runat="server" Text='<%# Bind("InvoiceType") %>' />
</td>
<td>
<asp:Label ID="lblInvoiceNumber" runat="server" Text='<%# Bind("InvoiceNumber") %>' />
<asp:TextBox ID="txtBoxInvoiceNumber" runat="server" style="display:none"></asp:TextBox>
</td>
<td id="SaveOption" style="display:none">
<asp:Button ID="btnSaveInvNrFormat" runat="server" Text="Save" />
<span id="SaveResultMsg"></span>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<div id="EditWindow" title="Edit Invoice Number Format">
</div>
</asp:Content>