不允许输入或聚焦的输入类型文本

input type text not allowing input or focus

本文关键字：输入 类型 文本 聚焦 不允许      更新时间：2023-09-26

问题

我有一个画布元素，上面有一个div，里面有一个文本输入。文本输入不允许我输入文本或显示光标，也不允许我在点击时聚焦。

我自己解决问题所采取的步骤

在探索了其他类似的问题后，我可以忽略以下原因：

  • div的z索引低于画布（我仍然可以看到输入框）

  • 未正确设置定位（我已将div设置为位置：绝对）

  • 设置select：在css中无（我没有这个）

我不能粘贴我的所有代码，因为它太长了，但我可以发布相关部分：

setBuildingTileSet是包含有问题的文本输入的div。

css

#setBuildingTileSet {
    height: 200px;
    left: 50%; 
    bottom: 50%;
    margin: -100px 0 0 -200px;
    position: absolute;
    width: 400px;
    opacity: 0.7;
    background: #000;
    z-index:1;
    padding: 20px;
}

html

<div id="container"></div>
<div id="setBuildingTileSet">
  <h1>Set Building TileSet </h1>
  <p><h2>Tileset name</h2></p>
  <input id="buildingTileSetName" type="text">
</div>

javaScript

canvas = document.createElement('canvas');
$('#container').append(canvas);
$('#container canvas')[0].id =('canvas');
context = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 600;

我完全被卡住了，不明白为什么输入框不能工作。感谢您的帮助：）

现在已解决，但解决方案会导致错误的原因仍然未知

是的，在玩了很多我的代码之后，我发现了"问题"。我有一个mouseDown事件监听器，当点击各种UI按钮时，它会激活各种东西：

CoffeeScript

window.addEventListener 'mousedown', (e) =>
  button = e.which or e.button
  if button == 1 then @UIMouseDown(e) # Left mouse click
, false
UIMouseDown: (e) =>
  e.preventDefault() 
  ......etc

解决方案我发现，当我删除e.preventDefault（）时，文本框允许我输入文本：）

后续问题有人知道e.preventDefault（）为什么会导致这种行为吗？

回答您的后续问题：

e.preventDefault()取消事件的默认行为。如果你将其与其他事件进行比较，这是有意义的：

  • click：对于<a href="...">元素，浏览器不会像默认情况下那样导航
  • submit：对于<form>元素，浏览器不会像默认情况下提交表单
  • mousedown：浏览器不会像默认情况下那样执行鼠标放下过程（例如将焦点设置在鼠标光标当前所在的元素上）
相关文章：