javascript 如何在输入标签内显示div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17938461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display div inside input tag?
提问by Manoz
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.
我能够创建标签，但无法像我们在 stackoverflow 中那样在输入框中显示它，标签之间的边距存在问题。每次我创建标签时，它都会对齐但没有空间或边距。目前，它显示所有标签内联，没有任何空间。
jQuery i tried-
我试过的 jQuery-
$(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');
}
But this doesn't work.
但这不起作用。
Jsfiddle
提琴手
回答by musicnothing
Short answer: You can't/don't. But you can give the appearance that you are.
简短的回答：你不能/不。但是你可以表现出你的样子。
Longer answer: 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(); });
});
回答by meborda
You can't insert a div in an input tag. Here in stackoverflow, if you try adding a tag in the input tag, then right click on the input tag then click on Inspect Element, you will see that they are adding span tag, but not inside the input tag itself.
您不能在输入标签中插入 div。在 stackoverflow 中，如果您尝试在 input 标签中添加标签，然后右键单击 input 标签，然后单击 Inspect Element，您将看到它们正在添加 span 标签，但不在 input 标签内部。
<div>
<span > //for the tags
<input />
</div>
回答by meborda
$(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
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;
}
