如何在输入标签内显示div? [英] How to display div inside input tag?

问题描述

我正在尝试为我的网站创建诸如stackoverflow之类的标签，我网站上的用户将在创建用于过滤结果或其他许多操作(如搜索，专业知识等)的标签.

I am trying to create tags like stackoverflow for my website, a user on my website will be creating tags for filtering results or many other operations like search, expertise etc.

我能够创建标签，但是不能像在stackoverflow中一样在输入框内显示它，标签之间的边距存在问题.每次我创建标签时，它都是对齐的，但没有空格或边距. 当前，它以内联方式显示所有标签，没有任何空格.

I am able to create tag but not able to show it inside input box as we do in stackoverflow, there is problem with margin between tags. Every time when i create tag it is aligned but has no space or margin. Currently it is showing all tags inline without any space.

我尝试过的jQuery-

jQuery i tried-

$(function () {        
    $("#inputtext").keypress(function (e) {
        var valueofinput = $(this).val();
        if (e.which == 13) {
            $('.tag').html(valueofinput);
            $('.tag').show();
        }
    });

    $('.tag').click(function () {
        $(this).hide();
    });        
});    

但是我试图在这样的输入标签中显示它-

However i tried showing it in input tag like this-

if(e.which==13)
{
$("#inputtext").val().addClass('tag').css('display','inline-block');
}
if(e.which==32)     //for space
{
$('.tag').css('margin-left','5px');
}

但这是行不通的.

推荐答案

简短答案:您不能/不可以.但是你可以让自己看起来像个样子.

Short answer: You can't/don't. But you can give the appearance that you are.

更长的答案:示例

$(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(); });
});

这篇关于如何在输入标签内显示div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！