jquery可拖动的输入框无法检测到按键按下/无法输入任何内容。

12 浏览
0 Comments

jquery可拖动的输入框无法检测到按键按下/无法输入任何内容。

我正在编写一个可拖动的HTML div，如下所示：

enter image description here

它的样子是这样的：

enter image description here

但是我无法像正常的输入框一样输入任何内容，例如：。

它不会对任何键盘事件作出响应。

我尝试使用stopPropagation来阻止事件冒泡到父元素，如下所示：

    input.onclick = function ( evt ) {
        evt.stopPropagation();
        console.log( 'input被点击了' );
    };
    $( input ).on( 'keydown', function ( evt ) {
        evt.stopPropagation();
        console.log( 'input按下键盘' );
    } );

其中input是：

    let input = document.createElement( 'input' );
    input.setAttribute( 'type', 'text' );

并且使用console.log( input )：

enter image description here

但是这并没有帮助。（对于后续的keydown事件，控制台中没有输出。）

有人可以向我提供一种调试此问题的方法吗？这真的让我抓狂。谢谢！

附注：使用的是Chrome浏览器。

更新：我找到了问题，但不知道原因。

问题是因为我使用jquery draggable装饰了父级dom，我需要取消，如下所示：

    $('#input-parent').draggable({
        containment: 'window',
        cancel: '.x-leaf'
    });

通过之前的stopPropagation和@Brainfeeder建议的方法，最终问题得到解决。

0

1 答案

0 Comments

问题的原因是因为在DOM加载后创建了输入框，所以最好在页面加载时在DOM中存在的父元素上调用.on()方法。解决方法是将$(input)更改为.x-node input或与输入框匹配的选择器。

$('#someParentEl').on( 'keydown', '.x-node input', function ( evt ) {
    console.log( 'input got keydown' );
} );

尝试更改如下代码：

$( document ).on( 'keydown', $( '.x-node input' ), function ( evt ) { 
	evt.stopPropagation(); 
	console.log( 'input got keydown' ); 
} );

感谢您的耐心。我已经使用以上代码检测到事件。但是我仍然无法输入任何内容。

真正奇怪的是，一旦我添加了这个

input.classList.add('x-connection');

，那么它就能正常工作，即使是之前有错误的代码。

.x-connection{
	position:absolute;
	border:solid 1px #dedede;
	background-color:#2e2e2e;
	width:0.5em;
	height:0.5em;
	border-radius:0.5em;
}

您可能需要删除

evt.stopPropagation();

这样可以防止数据添加到输入框中。

再次感谢。根据我正在做的事情，我在这里提出了一个类似的问题：stackoverflow.com/questions/10920355/…，以及我喜欢的答案：jsfiddle.net/cn7y2mwb，希望对其他人有用。

0