jQuery 动态生成的文本框行为不正确
我有一些表列,其中包含值,当您单击编辑按钮时,我将创建一个包含列值的文本框,有点像就地编辑功能。
var title = item.find('.co_edit_title').html("<input type='text' style='width:240px' name='title' value='" + item.find('.co_edit_title').text() + "' />");
工作正常,输入框显示提供的值。问题在于,在 FF、Chrome 和 Safari 中,文本框的行为与平常不同。退格键可以正常工作,但普通键盘功能却不能。
例如,SHIFT + 箭头不会突出显示字符,左右箭头键不会左右移动光标。由于某种原因,向上和向下键会左右移动光标。最后,在 IE 中,除了退格键表现得好像不在文本框中一样之外,还存在这些相同的问题,它使浏览器返回到页面。
对于为什么会发生这种情况有什么想法吗?
编辑:之前应该指出这一点,但所有这些都发生在 Fancybox 弹出窗口内,该弹出窗口显示页面上已有的内联内容。唯一的动态部分是用文本框替换列值。
I have table columns with values in them and when you click the edit button, I am creating a textbox with the column value in it, kind of like an edit-in-place feature.
var title = item.find('.co_edit_title').html("<input type='text' style='width:240px' name='title' value='" + item.find('.co_edit_title').text() + "' />");
Works fine, the input box appears with the value supplied. The problem is that in FF, Chrome, and Safari, the textbox doesn't behave like it normally would. The backspace key works fine but normal keyboard functionality doesn't.
For instance, SHIFT + arrow doesn't highlight characters and the left and right arrow keys don't move the cursor left and right. The up and down keys move the cursor left and right for some reason. Finally, in IE there are these same problems in addition to the backspace key acting as if it is not in the textbox, it makes the browser go back a page.
Any thoughts on why this is happening?
EDIT: Should have pointed this out before but all of this is happening inside of a Fancybox popup which is displaying inline content that is already on the page. The only dynamic part is the replacing of the column values with a textbox.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
发现问题了,是Fancybox本身的问题。由于事件侦听器,箭头导航被搞砸了。预计在 1.3.2 中修复。
来源
Found the problem, it was with Fancybox itself. Arrow navigation is screwed up because of an event listener. Supposed to be fixed in 1.3.2.
Source
我尝试将文本框添加到 div 中,文本框可以正常工作。您可以在这里亲自查看:http://jsbin.com/inapo4。难道是 item.find() 无法正常工作吗? “item”只是一个 jQuery 对象,对吗?
I tried just adding a textbox to a div and the textbox works normally as it should. See for yourself here: http://jsbin.com/inapo4. Could it be something with the item.find() not working right? The "item" is just a jQuery object right?