Элемент ввода исчезает в IE(10) на Backspace
У меня есть ASP.NET страница, которая загружает кучу данных из БД в ListView с LayoutTemplate а также ItemTemplate, Когда пользователь наводит курсор на строку, последний столбец переключает свое содержимое на текстовое поле с тем же значением, что делает его редактируемым. Это работает в Chrome, и теперь я почти получил его на работу в IE10 также.
Проблема остается в том, что при возврате в текстовом поле первое нажатие клавиши, по-видимому, удаляет само текстовое поле, но оставляет содержимое, а второе нажатие делает и текстовое поле, и содержимое невидимым. Щелчок внутри текстового поля снова делает его видимым, как и перемещение курсора мыши за пределы области текстового поля.
Я не смог сделать из этого Snaggit, я пытался.
К сожалению, 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>
1 ответ
Решение
Изменения
//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();
}
});
в
//if the value changes
$clickedRow.find('input[id$="txtBoxInvoiceNumber"]').on('input propertychange', function () {
//but if it changes back to what it was within the same 'mouseenter' moment
if ($(this).val() == $clickedRow.find('span[id$="lblInvoiceNumber"]').text()) {
$clickedRow.find('td[id$="SaveOption"]').hide();
$clickedRow.find('input[id$="btnSaveInvNrFormat"]').hide();
} else {
$clickedRow.find('td[id$="SaveOption"]').show();
$clickedRow.find('input[id$="btnSaveInvNrFormat"]').show();
}
});
решил проблему.