html - 文本框宽度根据 HtmlAttributes 的数量而变化
问题描述
我有以下cshtml文件:
@using UniHockey.Models
@model UniHockey.Models.Game
@{
ViewBag.Title = "Game";
}
<div id="Team1PlayerScores">
@for (int i = 0; i < Model.Team1.Players.Count; i++)
{
@Html.DisplayFor(m => Model.Team1.Players[i].Name)
@Html.EditorFor(m => Model.Team1.Players[i].GoalsForCurrentGame, new { htmlAttributes = new { min = 0, max = 99, onchange = "updateTeamScore('Team1PlayerScores', 'Team1Score')" } })
}
</div>
我注意到文本框的宽度会根据我在Html.EditorFor()
方法中应用的 HTML 属性的组合而变化。
这是我得到的两种不同尺寸:
这是我用来测试 3 个属性的所有组合的真值表(其中 1 表示应用了该属性):
min max onchange
001 - big
010 - big
011 - big
100 - big
101 - big
110 - small
111 - small
如您所见,除非同时存在 min 和 max HTML 属性,否则文本框总是很大,如果至少缺少一个,则文本框宽度很大。
以下是Html.EditFor()
辅助方法生成的 HTML:
大文本框:
Travis<input class="text-box single-line" data-val="true" data-val-number="The field GoalsForCurrentGame must be a number." data-val-required="The GoalsForCurrentGame field is required." id="Team1_Players_0__GoalsForCurrentGame" min="0" name="Team1.Players[0].GoalsForCurrentGame" onchange="updateTeamScore('Team1PlayerScores', 'Team1Score')" type="number" value="0" />
</div>
小文本框:
Travis<input class="text-box single-line" data-val="true" data-val-number="The field GoalsForCurrentGame must be a number." data-val-required="The GoalsForCurrentGame field is required." id="Team1_Players_0__GoalsForCurrentGame" max="99" min="0" name="Team1.Players[0].GoalsForCurrentGame" type="number" value="0" />
</div>
为什么会这样?
编辑:
这是文本框较大时的 CSS:
element.style {
}
user agent stylesheet
input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
padding: 1px 0px;
}
user agent stylesheet
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
user agent stylesheet
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
}
user agent stylesheet
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb !important;
}
当它很小的时候:
element.style {
}
user agent stylesheet
input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
padding: 1px 0px;
}
user agent stylesheet
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
user agent stylesheet
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
}
user agent stylesheet
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb !important;
}
它们是相同的 CSS。
解决方案
推荐阅读
- algorithm - 算法选择欧洲的任何点,并查看从该点到欧洲任何主要城市的距离
- javascript - 添加两个数字算法理解
- data-structures - 二分查找和二分查找树的区别
- java - Java 将 HTML 代码转换为普通字符
- ruby-on-rails - 获取“/locations/around/-17.28794,16.9”时出现 Rails 路由错误
- javascript - 正则表达式检查除连字符和正斜杠以外的特殊字符
- java - 任何人都可以解决用堆栈计算算术表达式的错误吗?
- c++ - 没有标准函数的 C++ 立方根查找器
- perl - perl 正则表达式匹配部分作为输出文件名
- apache-spark - 如何在 Spark 3.0 Preview 中使用 Delta?