Question

我正在制作某种聊天框，我希望当用户点击整个聊天框时，消息框中的输入会聚焦，除非用户选择要复制的文本;在这种情况下，它会让用户无法复制它，因为当他释放鼠标时，所选的文本将被取消选择，而且......很糟糕。

有什么想法吗？

PD：使用jQuery生成.chats，因此我必须使用代码段中的事件。

这是我的代码的摘录（只有重要的东西）：

$("body").on("click", ".chat", function() {
   $(this).find("input").focus()
 });

.chat {
  background-color: #fff;
  bottom: 0;
  left: 0;
  position: fixed;
  width: 200px;
  height: 250px;
  border: 1px solid #ccc;
  padding: 0.5em
}
.chat .messages {
  color: #666;
}
.chat input {
  position: absolute;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="chat">
  <div class="messages">Terrible markup... Try to copy me. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <input/>
</div>

Answer 1

在mousedown和mouseup（~350ms）之间

使用时差
了解它是点击还是（慢）文字选择！

var t;
$(document).on("mousedown mouseup", ".chat", function(ev) {
    t = ev.type=="mousedown" ? new Date() : new Date() - t;
    if(t<350) $(this).find("input").focus();
});

.chat {
  background-color: #fff;
  bottom: 0;
  left: 0;
  position: fixed;
  width: 200px;
  height: 250px;
  border: 1px solid #ccc;
  padding: 0.5em
}
.chat .messages {
  color: #666;
}
.chat input {
  position: absolute;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="chat">
  <div class="messages">Terrible markup... Try to copy me. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <input/>
</div>

.click（）上的火灾事件（选择文字时除外）

1 个答案: