0
私のフォームは妙に動作します。私たちのシステムの他の形式はうまく動作しますが、私のIE11では微妙なことがいくつかあります。それはコンポーネントのいくつかがうまく同居していないためです。プレースホルダテキストが編集可能です
私の質問は、これらの奇妙なことをやり遂げるのを止めて、どうしてこれらの奇妙なことが起こっているのですか？
私のフォームでは、不動産売却のリストが<table>に表示されます。それぞれの販売には<tbody>があり、その中に数個の<tr>が入っています。セルの1つに、Bootstrapのツールチップを持つファイル入力が含まれています。フォームが最初に表示されるときには、display: noneまたはJQuery .hide()を使用して、販売の一部を非表示にする必要があります。このフォームでは、プレースホルダと、コードに基づいてhereからの必須入力飾り（必須入力の横にアスタリスクを自動的に入れる）も使用されます。
ファイルの入力を含む<tr>のいずれも隠しておらず、必須の入力装飾を使用していないという奇妙なことを止めることができる2つの事柄を発見しました。残念ながら、私はこれらのことを両方行う必要があります。
奇妙な
- 初期キャレット配置は：最初に焦点を当てて、テキストボックスに（事前にあるアドレスフィールドには、）、キャレットは時には、テキストの先頭に表示されます最後に
- 編集可能なプレースホルダ：ブラウザのタブテキストが待機FO」で立ち往生：以下
- タブのタイトル見ますR ...」奇妙な行動の
- 奇妙なパターンは：
編集可能なプレースホルダの下に表示さ
私はプレースホルダでテキストボックスをクリックすると、キャレットがで表示されるようにするために、正常な動作ですテキストボックスの左側に（Chromeでは）プレースホルダーのテキストがキャレットの右側に表示され、（IE11では）プレースホルダーのテキストは消えます。私のページはIE11で不気味動作しているときには、キャレットは、プレースホルダの後に表示されます。
...と編集可能です...
フォームが送信され
、更新されたプレースホルダーのコンテンツはそれと共に送信されないので、ユーザーは保存されると思われるテキストを入力する可能性がありますが、そうではありません。
プレースホルダの奇妙さも微妙です。ページ上の最初のマウスクリックでのみ発生します。後続のクリックやフィールド間のキーボードのタブ移動で正常に動作します。奇妙な行動の
奇妙なパターン
物事は異なるページが表示される前に何が起こったかに応じて動作します。
最初の表示では、プレースホルダが編集可能です。プレースホルダをクリックしたとき（つまり、プレースホルダテキストの中か後にキャレットが表示される）、プレースホルダをクリックしなかった場合と比べて、更新後のページの動作が異なります。
プレースホルダ付きのテキストボックスの1つを最初にクリックし、プレースホルダが編集可能な場合は、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();
});