无法单击文本框来更改其值答案

【问题标题】：Can't click on a text box to change its value无法单击文本框来更改其值
【发布时间】：2020-07-06 18:27:42
【问题描述】：

我正在处理一个文本框。当您将鼠标悬停在文本 div 上时，该 div 会隐藏并且输入标签会显示（使用 display: none/block）。文本 div 引用输入标签的值，输入标签不标准的唯一原因是让它看起来更时尚。两者之间的交互效果很好，但是一旦显示文本框，我就无法单击它。如果我右键单击文本框，光标正常显示，然后我可以再次左键单击文本框以摆脱右键菜单并实际输入框，正确编辑文本 div。我也可以在文本框之间进行标签编辑（这是一个反复出现的问题），但我仍然无法左键单击它们。如果有任何区别，我正在 vis.js 时间线的泳道行样式行标题中工作。

这是输入标签：

<input style='display: none;' id='editTitle' type='text' value='Title'/>

它被创建为页面 javascript 文件中父行标题 json 对象的一部分。我尝试将位置设置为粘性和 z-index 高达（2 ^ 32）-1，以及浮动它（虽然不是一起）。没有什么能让我左键单击它进行编辑。这是一个奇怪的问题。我感觉它与 vis.js 不兼容有关，但我不能确定。不会引发错误，即使用户右键单击然后左键单击，编辑也可以正常工作。任何想法都表示赞赏。

谢谢。

【问题讨论】：

听起来像是显示和隐藏代码的问题。由于您没有显示它，我们只能猜测。更多代码 = 更好的答案
@epascarello 是的，我希望我能展示更多。这是我在工作中正在进行的一个项目的一部分，并且在 NDA 下，不幸的是我不确定我可以放多少。

标签： javascript html css vis.js

【解决方案1】：

我已尽我所能理解您的问题，当您将光标指向文本input 时出现，当鼠标离开时 input 消失到

$(document).ready(function() {
  $('.content').on('mouseover', function() {
    $('#editTitle').show(200);
  });
  $('.content').on('mouseleave', function() {
    $('#editTitle').hide(200);
  });
});

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  background: darkcyan;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 500px;
  height: 500px;
}

input {
  width: 200px;
  height: 30px;
  border: none;
  outline: none;
  border-radius: 10px;
  margin: 10px auto;
}

.content {
  margin: 10px auto;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <input style="display: none;" id='editTitle' type='text' value='Title' />
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</div>

【讨论】：