Моя форма ведет себя странно. Другие формы в нашей системе ведут себя очень хорошо, но мои делают некоторые тонкие странные вещи в IE11. Похоже, что некоторые из компонентов не сожительствуют.Текст заставки можно изменить
Мой вопрос: как я могу прекратить это делать эти странные вещи и почему происходят эти странные вещи?
Моя форма показывает список проданных объектов в <table>. Каждая продажа имеет свой собственный <tbody> с несколькими <tr> с. Одна из ячеек содержит вход файла, который имеет всплывающую подсказку (из Bootstrap). Мне нужно скрыть некоторые продажи, когда форма сначала отображается, и я использую display: none или JQuery .hide(). В форме также используются заполнители и некоторые «обязательные входные украшения» (автоматически помещая звездочку рядом с обязательными вводами) на основе кода от here.
В результате устранения я обнаружил две вещи, которые могут остановить случайные вещи: не скрывать ни одного из <tr> s, содержащего входные данные файла, и не использовать обязательное оформление ввода. К сожалению, мне нужно сделать обе эти вещи.
Странные вещи
- Первичное размещение каретка: в первоначально сфокусированного текстовом поле (поле адреса, который предварительно заполнен), каретка иногда появляется в начале текста, иногда в конце
- редактируемые заполнителем смотрите ниже
- Tab заголовка: вкладка браузера текст застревает на «Ожидание Ф.О. г ...»
- Странных паттерны странного поведения смотрите ниже
Editable заполнителя
Когда я нажимаю текстовое поле с заполнителем, нормальное поведение для каретки появляться на в левой части текстового поля с текстом заполнителя (в Chrome), все еще видимым справа от каретки, или (в IE11) текст заполнителя ушел. Но когда моя страница ведет себя странно в IE11, каретка появляется после того, как заполнитель:
... и редактируется ...
Когда форма отправлена, любой обновленный контент-заполнитель не отправляется вместе с ним, поэтому есть вероятность, что мои пользователи смогут ввести текст, который, по их мнению, будет сохранен, но это не так.
Замещающая странность тоже чувствительна: это происходит только при первом щелчке мыши на странице; вещи ведут себя нормально с последующими щелчками или комбинацией клавиш между полями.
Странные паттерны странного поведения
вещи работают по-разному в зависимости от того, что произошло до того, как появится страница.
На первом дисплее подменю можно редактировать. Если я нажимаю на местозаполнитель (т. Е. Получаю, чтобы каретка появлялась где-то в тексте заполнителя или после него), страница ведет себя по-разному после обновления, чем если бы я не нажимал на местозаполнитель.
Если я сначала нажму в одно из текстовых полей с помощью заполнителя, а местозаполнитель будет доступен для редактирования, то после F5 в исходном фокусе текстовое поле будет иметь каретку в начале. Или, если в первоначально сосредоточенном текстовом поле был карет в начале, чтобы начать, и я ничего не делаю с формой, каретка снова переходит в начало после F5. Если вначале сосредоточенное текстовое поле имело каретку в конце, тогда я могу отредактировать текст заполнителя моего поля комментариев ... Это немного запутанно.
То, что я пытался
Мы обычно используем this сделать заполнители работать в старых браузерах. Я попытался удалить его, но это не имеет никакого значения.
Я пробовал this script, но это просто делает проблему немного другой: каретка перемещается в начало заполнитель, но она все еще доступна для редактирования.
Я попытался удалить nicefileinput, но это не имело значения.
Вот моя вся форма. Поле «Комментарий» появляется примерно на полпути вниз по форме
@model OurCompany.Web.ViewModels.OurProductCompleteDesktopSalesComparisonViewModel
@{
ViewBag.Title = "CompleteDesktopSalesComparison";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" href="~/content/css/typeahead.js-bootstrap.css">
<script type="text/javascript" src="~/Content/Scripts/DICurrencyInputFormatter.js"></script>
<section class="container-wrap">
<div class="container">
@Html.Partial("~/Views/OurProduct/_CompleteHeaderPartial.cshtml")
@using (Html.BeginForm("CompleteDesktopSalesComparison", "OurProduct", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.ValidationSummary(false)
@Html.AntiForgeryToken()
@Html.HiddenFor(m => m.Valuation.OrderNumber)
@Html.HiddenFor(m => m.Property.DIPID)
@Html.HiddenFor(m => m.Property.FullAddress)
@Html.HiddenFor(m => m.Valuation.CategoryCode)
@Html.HiddenFor(m => m.Valuation.ValuationTypeCode)
@Html.Partial("~/Views/OurProduct/_CompleteNavigationTabsPartial.cshtml")
<div class="col-md-10 col-md-offset-1">
<div class="row"> </div>
<div>
@*Sales comparisons==============================================================================*@
@Html.Hidden("saleCount", Model.ComparableSales.Count)
<table class="table table-default">
@foreach (var sale in Model.ComparableSales)
{
var saleIndex = Model.ComparableSales.IndexOf(sale);
var isVisible = sale.Visible;
var shadedClass = saleIndex % 2 == 0 ? string.Empty : "shaded-rows";
var visibleStyle = isVisible ? string.Empty : "display: none;";
var saleTbodyId = string.Format("saleTbody{0}", saleIndex);
var selectedId = string.Format("selected{0}", saleIndex);
var visibleId = string.Format("visible{0}", saleIndex);
<tbody id="@saleTbodyId" class="@shadedClass" style="@visibleStyle">
@*Address, selected*@
<tr>
<td>
@Html.HiddenFor(m => m.ComparableSales[saleIndex].Sequence)
@Html.HiddenFor(m => m.ComparableSales[saleIndex].Visible, new{ id = visibleId})
Address
</td>
<td colspan="3">
@Html.TextBoxFor(m => m.ComparableSales[saleIndex].FullAddress, new {@class = "form-control tt-query", style = "width: 100%;", placeholder = "Full address of sale"})
@Html.ValidationMessageFor(m => m.ComparableSales[saleIndex].FullAddress)
@Html.HiddenFor(m => m.ComparableSales[saleIndex].Dipid)
<script>
$("#[email protected](saleIndex)__FullAddress").on("typeahead:selected typeahead:autocompleted", function(e, datum) {
$("#[email protected](saleIndex)__Dipid").val(datum.SearchKey);
})
</script>
</td>
<td>@Html.DisplayNameFor(m => m.ComparableSales[saleIndex].Selected)</td>
<td>
@Html.CheckBoxFor(m => m.ComparableSales[saleIndex].Selected, new { id = selectedId })
</td>
</tr>
@*Date, Price*@
<tr>
<td>@Html.DisplayNameFor(m => m.ComparableSales[saleIndex].Date)</td>
<td>
<span class="di-mandatory-field-container di-mandatory-field-text" style="position: relative;">
@Html.DropDownListFor(m => m.ComparableSales[saleIndex].Date,
Model.GetSalesDateListInstance(Model.ComparableSales[saleIndex].Date),
new { @class = "form-control" })
</span>
</td>
<td>@Html.DisplayNameFor(m => m.ComparableSales[saleIndex].PriceString)</td>
<td>
@Html.TextBoxFor(m => m.ComparableSales[saleIndex].PriceString,
new { @class = "form-control currency-0-decimals", placeholder = "Sale price" })
@Html.ValidationMessageFor(m => m.ComparableSales[saleIndex].PriceString)
@Html.ValidationMessageFor(m => m.ComparableSales[saleIndex].Price)
</td>
<td></td>
<td></td>
</tr>
@*Floor Area, Bedrooms*@
<tr>
<td>@Html.DisplayNameFor(m => m.ComparableSales[saleIndex].FloorArea)</td>
<td>
@Html.TextBoxFor(m => m.ComparableSales[saleIndex].FloorArea,
new { @class = "form-control", placeholder = "Floor Area" })
@Html.ValidationMessageFor(m => m.ComparableSales[saleIndex].FloorArea)
</td>
<td>@Html.DisplayNameFor(m => m.ComparableSales[saleIndex].Bedrooms)</td>
<td>
@Html.TextBoxFor(m => m.ComparableSales[saleIndex].Bedrooms,
new { @class = "form-control", placeholder = "Bedrooms" })
@Html.ValidationMessageFor(m => m.ComparableSales[saleIndex].Bedrooms)
</td>
<td></td>
<td></td>
</tr>
@*Land Area, Bathrooms*@
<tr>
<td>@Html.DisplayNameFor(m => m.ComparableSales[saleIndex].LandArea)</td>
<td>
@Html.TextBoxFor(m => m.ComparableSales[saleIndex].LandArea,
new { @class = "form-control", placeholder = "Land Area" })
@Html.ValidationMessageFor(m => m.ComparableSales[saleIndex].LandArea)
</td>
<td>@Html.DisplayNameFor(m => m.ComparableSales[saleIndex].Bathrooms)</td>
<td>
@Html.TextBoxFor(m => m.ComparableSales[saleIndex].Bathrooms,
new { @class = "form-control", placeholder = "Bathrooms" })
@Html.ValidationMessageFor(m => m.ComparableSales[saleIndex].Bathrooms)
</td>
<td></td>
<td></td>
</tr>
@*Comment*@
<tr>
<td>@Html.DisplayNameFor(m => m.ComparableSales[saleIndex].Comment)</td>
<td colspan="5">
@Html.TextBoxFor(m => m.ComparableSales[saleIndex].Comment,
new { @class = "form-control", placeholder = "Comments" })
@Html.ValidationMessageFor(m => m.ComparableSales[saleIndex].Comment)
</td>
</tr>
@*Image*@
<tr>
<td>
<p>Image</p>
<p>(@Html.DisplayFor(m => m.FileExtensionConstraintMessages["VALUATION_REPORT_SALE_IMAGE"]))</p>
</td>
<td colspan="5">
@if (Model.ComparableSales[saleIndex].Images != null)
{
foreach (var file in Model.ComparableSales[saleIndex].Images)
{
<span>@Html.DisplayFor(f => file.FileName) (Created: @Html.DisplayFor(f => file.CreateDate))</span>
<a href="@Url.Action("PropertyFile", "Files", new { orderNumber = Model.Valuation.OrderNumber, fileTypeCode = file.FileTypeCode, userFileId = file.Id })"><i class="fa fa-file fa-lg"></i></a>
<br/>
}
}
<span data-toggle="tooltip" data-placement="top" title="@Html.DisplayFor(m => m.FileUploadConstraintMessages["VALUATION_REPORT_SALE_IMAGE"])">
<input type="file" name="[email protected](saleIndex)Image"/>
</span>
@{ var validationMessageKey = String.Format("SaleComparisonImage{0}", saleIndex); }
@Html.ValidationMessage(validationMessageKey)
</td>
</tr>
@*Comparability*@
<tr>
<td>@Html.DisplayNameFor(m => m.ComparableSales[saleIndex].Comparability)</td>
<td colspan="5">
@Html.TextBoxFor(m => m.ComparableSales[saleIndex].Comparability,
new { @class = "form-control", placeholder = "Comparability - e.g. Inferior, Comparable, Superior" })
@Html.ValidationMessageFor(m => m.ComparableSales[saleIndex].Comparability)
</td>
</tr>
</tbody>
}
</table>
</div>
<div><input id="addSaleButton" type="button" value="Add a sale" class="btn btn-light" /></div>
</div>
@Html.Partial("~/Views/OurProduct/_CompleteNavigationButtonsPartial.cshtml")
}
<div class="row"> </div>
</div>
<div class="push"></div>
</section>
<script src="~/Content/scripts/moment.js"></script>
<script src="~/Content/scripts/bootstrap.min.js"></script>
<script src="~/content/scripts/jquery.nicefileinput.min.js"></script>
<script src="~/content/scripts/jquery.placeholder.js"></script>
<script src="~/content/scripts/typeahead.js"></script>
<script>
$("#addSaleButton").click(function() {
var saleCount = $("#saleCount").val();
for (var i = 0; i < saleCount; i++) {
var saleTbodyId = "saleTbody" + i;
if ($("#" + saleTbodyId + ":hidden").length > 0) {
// make the sale visible
$("#" + saleTbodyId).show();
// check the Selected checkbox
var selectedId = "selected" + i;
$("#" + selectedId).prop("checked", true);
// set the hidden value to ensure it shows after validation errors
var visibleId = "visible" + i;
$("#" + visibleId).val("True");
// done one, don't do any more
break;
}
}
});
$(".tt-query").typeahead({
name: 'SearchValue',
valueKey: 'SearchValue',
limit: 20,
remote: {
url: '/properties/GetAddressSearchValues?partSearchValue=%QUERY'
}
});
$(document).ready(function() {
// tooltips
$("span").tooltip({ placement: 'top' });
// custom styling for file input
$("input[type=file]").nicefileinput();
// placeholder attribute for old browsers
$('input, textarea').placeholder();
$("#ComparableSales_0__FullAddress").focus();
});
</script>
Вот Обязательный ввод украшение .js файл
// Add a CSS class to mandatory text input fields.
// see http://www.robertgray.net.au/posts/2012/11/indicating-required-fields-with-twitter-bootstrap-and-aspnet-mvc-4#.VMqY0miUfeo
function markRequired() {
// look at every mandatory field
$('input[data-val-required]').each(function() {
// not all should be treated
if (!$(this).parent().hasClass("input-append") && !(this).hasAttribute("readonly")) {
if ($(this).is("input:text")) {
$(this).wrap("<div class='di-mandatory-field-container di-mandatory-field-text'>");
//$(this).wrap("<div class='input-group'>");
//$(this).after("<span class='input-group-addon'><i class='fa fa-asterisk required-asterisk'></i></span>");
//$(this).addClass("di-mandatory-field-container");
//$(this).addClass("di-mandatory-field-text");
//$(this).wrap("<span>");
}
}
});
}
function addFootnote() {
var parentForm;
// check the form for mandatory class (may be manually- or automatically-added)
var firstMandatory = $('.di-mandatory-field-container').first();
// find the form containing that element
if (firstMandatory != null) {
var parentFinder = firstMandatory[0];
while (parentForm == null && parentFinder != null) {
if (parentFinder.tagName.toLowerCase() == "form") {
parentForm = parentFinder;
}
parentFinder = parentFinder.parentNode;
}
}
// add the footnote
if (parentForm != null) {
var rubric = $('<span>', { text: "denotes a mandatory field", style: "position: absolute;" })
.addClass("di-mandatory-field-footnote");
rubric.appendTo($(parentForm).parent());
}
}
$(document).ready(function() {
markRequired();
addFootnote();
});