我正在尝试为我的网站创建类似stackoverflow的标签,我网站上的用户将创建用于过滤结果的标签或许多其他操作,如搜索,专业知识等。
我能够创建标签但不能像在stackoverflow中那样在输入框中显示它,标签之间的边距存在问题。每当我创建标签时,它都是对齐的,但没有空格或边距。 目前,它显示所有标签内联,没有任何空格。
jQuery我试过 -
$(function () {
$("#inputtext").keypress(function (e) {
var valueofinput = $(this).val();
if (e.which == 13) {
$('.tag').html(valueofinput);
$('.tag').show();
}
});
$('.tag').click(function () {
$(this).hide();
});
});
但是我尝试在输入标签中显示它 -
if(e.which==13)
{
$("#inputtext").val().addClass('tag').css('display','inline-block');
}
if(e.which==32) //for space
{
$('.tag').css('margin-left','5px');
}
但这不起作用。
答案 0 :(得分:9)
简短回答:你不能/不能。但你可以给出你的样子。
更长的回答:Example
$(function(){
$("#inputtext").keypress(function(e){
var valueofinput= $(this).val();
if(e.which==13)
{
$('#inputtext').before('<span class="tag">' + valueofinput + '</span>');
$('input').val('');
}
});
$(document).on('click', '.tag', function(){
$(this).remove();
});
$('.inputholder').click(function() { $('#inputtext').focus(); });
});
答案 1 :(得分:1)
您无法在输入标记中插入div。在stackoverflow中,如果您尝试在输入标记中添加标记,然后右键单击输入标记然后单击Inspect Element,您将看到它们正在添加span标记,但不在输入标记本身内。
<div>
<span > //for the tags
<input />
</div>
答案 2 :(得分:0)
$(function(){
var oldVal;
$("#inputtext").change(function(e){
oldVal= $(this).val();
});
$("#inputtext").keypress(function(e){
var valueofinput= $(this).val().replace(oldVal,'');
if(e.which==13)
{
$('.tag').append("<span>"+valueofinput+"</span> ");
$('.tag').show();
}
});
});
<强> CSS 强>
.tag
{
height:auto;
width:auto;
background:white;
color:white;
text-align:center;
display:none;
position:absolute;
padding:5px;
margin:1em;
}
.tag > span
{
background:green;
}