代码之家 › 专栏 › 技术社区 › Mona Coder

关于将光标放入动态添加的输入中的问题

jquery javascript

Mona Coder · 技术社区 · 7 年前

基于我的演示代码,为什么我不能将光标移动到动态添加的输入中?如你所见,我正在使用 .focus() 允许用户开始输入文本,而无需单击此处,但它不起作用。

$(".container").dblclick(function(e) {
  $(this).append($('<input type="text"/>').css({ //some CSS here
  }).focus());
});

.container {
  background: #ddd;
  height: 600px;
  position: relative
}

input {
  margin: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

</div>

2 回复 | 直到 7 年前

The fourth bird 7 年前

您可以关注最后一个输入元素:

$(".container").dblclick(function(e) {
    $(this).append($('<input type="text"/>').css({ //some CSS here
    }));
    $("input:last").focus();
});

$(".container").dblclick(function(e) {
  $(this).append($('<input type="text"/>').css({ //some CSS here
  }));
  $("input:last").focus();
});

.container {
  background: #ddd;
  height: 600px;
  position: relative
}

input {
  margin: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

</div>

Kosh 7 年前

你在设置 focus 在将输入附加到dom之前。

尝试以下操作:

$(".container").dblclick(function(e) {
  $('<input type="text"/>')
    .css({ /* some CSS here */ })
    .appendTo(this)
    .focus();
});

.container {
  background: #ddd;
  height: 600px;
  position: relative
}

input {
  margin: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前