如何使用jQuery在输入中添加

How to add <div> element inside input using jQuery

本文关键字：添加 输入 何使用 jQuery      更新时间：2023-09-26
元素。
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#usr").click(function () {
                var divElement = "<div style='color:yellow;'>more text</div>";
                $('#usr').val($('#usr').val() + divElement);
            });
        });
    </script>
</head>
<body>
    <input class="form-control" id="usr">
</body>
</html>

我想在文本框中添加这个div 元素，但它作为字符串并显示。

是否可以执行此操作，

或者是否有其他方法可以执行此操作，例如输入。谢谢

无法

在输入框中添加div，但如果在使用时没有这样的问题contenteditable您可以使用div 代替输入字段。

你可以在里面添加任何东西。

http://www.w3schools.com/tags/att_global_contenteditable.asp

将div放在input内是不可能的。

在这里查看

它将添加输入并返回对象类型作为输出

<!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">     </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#usr").click(function(){
    $('#usr').val($(this).html('<div></div>'));
});
});
</script>
</head>
<body>
<input class="form-control" id="usr">

您不能将div或任何其他元素放入input 中。您可以在输入中插入简单文本。

喜欢：

$(document).ready(function(){
$("#usr").click(function(){
var divElement="more text";
    $('#usr').val($('#usr').val() + divElement);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input class="form-control" id="usr">

$(document).ready(function(){
$("#usr").click(function(){
var divElement="<div style='color:yellow;'>more text</div>";
    $('#usr').val($('#usr').val() + divElement);
});
});

当您想添加任何 HTML 元素时，请使用如下所示的 append：

$('#usr').append($('#usr').val() + divElement);
相关文章：