问题
我有一个画布元素,在此之上我有一个带有文本输入的 div。文本输入将不允许我输入文本或显示光标或单击时成为焦点。
我为自己解决问题而采取的步骤
在探索了与此类似的其他问题后,我可以忽略以下原因:
div的z-index低于画布(我仍然可以看到输入框)
未正确设置定位(我已将 div 设置为 position: absolute)
在 css 中设置 select: none (我没有这个)
我无法粘贴所有代码,因为它太长了,但我可以发布相关部分:
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>
脚本
canvas = document.createElement('canvas');
$('#container').append(canvas);
$('#container canvas')[0].id =('canvas');
context = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 600;
我完全卡住了,看不出为什么输入框不起作用。感谢您的帮助人们:)
现在解决了 - 但解决方案会导致错误的原因仍然未知
是的,经过大量使用我的代码后,我发现了“问题”。我有一个 mouseDown 事件侦听器,它在单击各种 UI 按钮时激活各种事物:
咖啡脚本
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() 会导致这种行为?