使 HTML TextBox AutoComplete 忽略一些输入。 MVC
Make HTML TextBox AutoComplete ignore some inputs. MVC
我有一个隐藏的文本框,它的文本将自动更改为下拉菜单的文本,除非选择了下拉菜单的 optionLabel,在这种情况下用户可以输入自定义字符串(不是来自下拉菜单).
我目前关闭了文本框的自动完成功能,因为下拉菜单中的选项(隐藏文本框时)也会显示自动完成功能。
有没有办法防止某些值存储在自动完成菜单中?
代码中的其他一切正常。
相关代码:
<div class="form-group">
@Html.LabelFor(model => model.StudentId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div id="SessionAttendDrop">
@Html.DropDownListFor(model => model.StudentId, new SelectList(ViewBag.FirstStudentsIds, "Value", "Text"), defaultText, htmlAttributes: new { @class = "form-control", @style = "display:inline;" })
<button class="btn btn-default" id="noStudentButton" type="button" onclick="setNoStudent()" >Custom</button>
</div>
@Html.ValidationMessageFor(model => model.StudentId, "", new { @class = "text-danger" })
@Html.TextBoxFor(model => model.StudentName, htmlAttributes: new { @class = "form-control", @style = "display:inline;", @autocomplete = "off" })
@Html.ValidationMessageFor(model => model.StudentName, "", new { @class = "text-danger" })
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//initionalize hidden element
var text = $("option:selected", '#StudentId').text();
//check if loaded option is a student: if so, show; if not, hide
if ($('#StudentId').val() != "") {
$('#StudentName').val(text);
$('#StudentName').hide();
} else {
$('#StudentName').show();
}
$('#StudentId').change(function () {
var text = $("option:selected", this).text();
var selectedValue = $(this).val();
if (selectedValue != "") {
//if the option isn't the optionLabel option
$('#StudentName').val(text);
//document.getElementById("StudentName")
$('#StudentName').hide();
} else {
$('#StudentName').val("");
$('#StudentName').show();
}
});
});
function setNoStudent() {
$("#StudentId").each(function () {
var oldValue = this.value;
this.value = "";
if (oldValue != "") $(this).change();
});
}
您可以尝试使用以下 JavaScript 代码在 type="text" 和 type="hidden" 之间切换:
$(document).ready(function () {
var text = $("option:selected", '#StudentId').text();
//check if loaded option is a student: if so, show; if not, hide
if ($('#StudentId').val() != "") {
//hide
$('#StudentName').val(text);
$('#StudentName').attr('type', 'hidden');
} else {
//show
$('#StudentName').attr('type', 'text');
}
$('#StudentId').change(function () {
var text = $("option:selected", this).text();
var selectedValue = $(this).val();
//if the option isn't the optionLabel option, change the studentName to the dropdown text (and hide it), otherwise clear it (and show it).
if (selectedValue != "") {
//hide
$('#StudentName').val(text);
$('#StudentName').attr('type', 'hidden');
} else {
//show
$('#StudentName').val("");
$('#StudentName').attr('type', 'text');
}
});
});
我有一个隐藏的文本框,它的文本将自动更改为下拉菜单的文本,除非选择了下拉菜单的 optionLabel,在这种情况下用户可以输入自定义字符串(不是来自下拉菜单).
我目前关闭了文本框的自动完成功能,因为下拉菜单中的选项(隐藏文本框时)也会显示自动完成功能。 有没有办法防止某些值存储在自动完成菜单中?
代码中的其他一切正常。
相关代码:
<div class="form-group">
@Html.LabelFor(model => model.StudentId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div id="SessionAttendDrop">
@Html.DropDownListFor(model => model.StudentId, new SelectList(ViewBag.FirstStudentsIds, "Value", "Text"), defaultText, htmlAttributes: new { @class = "form-control", @style = "display:inline;" })
<button class="btn btn-default" id="noStudentButton" type="button" onclick="setNoStudent()" >Custom</button>
</div>
@Html.ValidationMessageFor(model => model.StudentId, "", new { @class = "text-danger" })
@Html.TextBoxFor(model => model.StudentName, htmlAttributes: new { @class = "form-control", @style = "display:inline;", @autocomplete = "off" })
@Html.ValidationMessageFor(model => model.StudentName, "", new { @class = "text-danger" })
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//initionalize hidden element
var text = $("option:selected", '#StudentId').text();
//check if loaded option is a student: if so, show; if not, hide
if ($('#StudentId').val() != "") {
$('#StudentName').val(text);
$('#StudentName').hide();
} else {
$('#StudentName').show();
}
$('#StudentId').change(function () {
var text = $("option:selected", this).text();
var selectedValue = $(this).val();
if (selectedValue != "") {
//if the option isn't the optionLabel option
$('#StudentName').val(text);
//document.getElementById("StudentName")
$('#StudentName').hide();
} else {
$('#StudentName').val("");
$('#StudentName').show();
}
});
});
function setNoStudent() {
$("#StudentId").each(function () {
var oldValue = this.value;
this.value = "";
if (oldValue != "") $(this).change();
});
}
您可以尝试使用以下 JavaScript 代码在 type="text" 和 type="hidden" 之间切换:
$(document).ready(function () {
var text = $("option:selected", '#StudentId').text();
//check if loaded option is a student: if so, show; if not, hide
if ($('#StudentId').val() != "") {
//hide
$('#StudentName').val(text);
$('#StudentName').attr('type', 'hidden');
} else {
//show
$('#StudentName').attr('type', 'text');
}
$('#StudentId').change(function () {
var text = $("option:selected", this).text();
var selectedValue = $(this).val();
//if the option isn't the optionLabel option, change the studentName to the dropdown text (and hide it), otherwise clear it (and show it).
if (selectedValue != "") {
//hide
$('#StudentName').val(text);
$('#StudentName').attr('type', 'hidden');
} else {
//show
$('#StudentName').val("");
$('#StudentName').attr('type', 'text');
}
});
});