Bootstrap 输入标签
Bootstrap tagsinput
我从以下资源下载了 bootstrap-tagsinput 库的源 JS 和 CSS:
http://timschlechter.github.io/bootstrap-tagsinput/examples/
在我的 asp.net 网站中,我按以下方式使用它:
<asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" CssClass="form-control" placeholder="Add Company" />
<script type="text/javascript">
$('input #txtCompany').tagsinput();
alert($('input #txtCompany').val());
</script>
但警报实际上应该 return 我创建的标签,而是 returns : undefined
JS写在Master Page
。 Master Page
.
中也提到了所有 CSS 和 JS 参考资料
这里有什么问题?
编辑:
TextBox 呈现如下:
编辑:
使用以下 jQuery 代码,我能够检索 div.
的内容
$('#btn').click(function () {
var div = document.getElementById("div");
var spans = div.getElementsByTagName("span");
for (i = 0; i < spans.length; i++) {
alert(spans[i].innerHTML);
}
});
但问题是它 return 如下:
并且还显示了另一个空警报!我不知道为什么!
你有2个选择
第一个是用浏览器上解析的id替换id
<asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" CssClass="form-control" placeholder="Add Company" />
<script type="text/javascript">
$('input #ContentPlaceHolder1_txtCompany').tagsinput();
alert($('input #ContentPlaceHolder1_txtCompany').val());
</script>
或者您将向文本框添加一个 class 作为第二种解决方案,并将 jquery 代码中的 ID 替换为 class 名称而不是 ID
<asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" class="form-control txtcomp" placeholder="Add Company" />
<script type="text/javascript">
$('input .txtcomp').tagsinput();
alert($('input .txtcomp').val());
</script>
尝试一下,我认为它会起作用
编辑
您可以使用此功能在 alert
中显示添加的项目值
$('input').on('itemAdded', function (event) {
alert(event.item)
});
您应该将属性 ClientIDMode 设置为 "Static" 以保持控件 ID 没有前缀中的父占位符 Id。像这样:
<asp:TextBox ID="txtCompany" ClientIDMode="Static" style="font-size:x-large"
runat="server" data-role="tagsinput" CssClass="form-control" placeholder="Add Company" />
我从以下资源下载了 bootstrap-tagsinput 库的源 JS 和 CSS: http://timschlechter.github.io/bootstrap-tagsinput/examples/
在我的 asp.net 网站中,我按以下方式使用它:
<asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" CssClass="form-control" placeholder="Add Company" />
<script type="text/javascript">
$('input #txtCompany').tagsinput();
alert($('input #txtCompany').val());
</script>
但警报实际上应该 return 我创建的标签,而是 returns : undefined
JS写在Master Page
。 Master Page
.
这里有什么问题?
编辑:
TextBox 呈现如下:
编辑:
使用以下 jQuery 代码,我能够检索 div.
的内容 $('#btn').click(function () {
var div = document.getElementById("div");
var spans = div.getElementsByTagName("span");
for (i = 0; i < spans.length; i++) {
alert(spans[i].innerHTML);
}
});
但问题是它 return 如下:
并且还显示了另一个空警报!我不知道为什么!
你有2个选择 第一个是用浏览器上解析的id替换id
<asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" CssClass="form-control" placeholder="Add Company" />
<script type="text/javascript">
$('input #ContentPlaceHolder1_txtCompany').tagsinput();
alert($('input #ContentPlaceHolder1_txtCompany').val());
</script>
或者您将向文本框添加一个 class 作为第二种解决方案,并将 jquery 代码中的 ID 替换为 class 名称而不是 ID
<asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" class="form-control txtcomp" placeholder="Add Company" />
<script type="text/javascript">
$('input .txtcomp').tagsinput();
alert($('input .txtcomp').val());
</script>
尝试一下,我认为它会起作用
编辑 您可以使用此功能在 alert
中显示添加的项目值 $('input').on('itemAdded', function (event) {
alert(event.item)
});
您应该将属性 ClientIDMode 设置为 "Static" 以保持控件 ID 没有前缀中的父占位符 Id。像这样:
<asp:TextBox ID="txtCompany" ClientIDMode="Static" style="font-size:x-large"
runat="server" data-role="tagsinput" CssClass="form-control" placeholder="Add Company" />