Question

我有一个html文件。我用jquery创建文本框。在创建文本框后，它们会失去焦点，我无法在它们上面写字这是我的代码。

<html>
<head>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".txt").click(function(){
            var value = $(this).text();
            var html = "<input type='text' class='txtbox' value='"+value+"'/>";
            $(this).html(html); 
        });
    });
</script>
<style type="text/css">
    div.txt{
        display: inline-block;
        border:1px red solid;
        width:150px;
        height: 30px;
        margin:1px;
    }
    div.btn{
        display:block;
        background-color: darkblue;
        color:white;
        padding:5px;
        text-align: center;
        width:100;
        cursor: default;
    }
    input[type='text'].txtbox{
        width: 100%;
        height: 100%;
        background-color: yellow;
        border:none;
        color:black;
        font-weight: bold;
    }
</style>
</head>
<body>
    <div class="txt">PARIS</div>
    <div class="txt">LONDON</div>
</body>

</html>

我无法解决这个问题。我是jQuery的新手。有什么问题？

Answer 1

代码问题在于，只要替换html，焦点就会被删除。

所以，我建议你添加一个jQuery对象并使用它的focus()。将焦点设置回已添加的文本框。

$(document).ready(function () {
    $(".txt").click(function () {
        var value = $(this).text();
        var txtBox = $("<input type='text' class='txtbox' />")
            .val(value);
        $(this).html(txtBox);
        txtBox.focus()
    });
});

DEMO

Answer 2

单击它们时，click事件将触发属于类txt成员的元素。输入会立即删除，并替换为没有焦点的新输入。

测试事件的target属性，以确保直接点击txt元素，而不是输入。

$(".txt").click(function(evt) {
    if (evt.target === this) {
        var value = $(this).text();
        var html = "<input type='text' class='txtbox' value='" + value + "'/>";
        $(this).html(html);
    }
}

为什么用jquery插入的文本框失去焦点？

2 个答案: