gpt4 book ai didi

html - 如何创建一个 HTML5 单行 contentEditable 选项卡来监听 Enter 和 Esc

转载 作者:太空宇宙 更新时间:2023-11-04 13:24:19 26 4
gpt4 key购买 nike

我有一个仪表板在工作,我希望人们能够更改选项卡上的文本以创建最适合他们的类别。

我想要单行文本,它会忽略 Esc 上的更改或提交 EnterBlur 上的更改。

我找到了答案,但认为我会发帖以帮助他人。

最佳答案

这是 HTML 标记:

<span contenteditable="false"></span>

这里是 jQuery/javascript:

$(document).ready(function() {
$('[contenteditable]').dblclick(function() {
$(this).attr('contenteditable', 'true');
clearSelection();
$(this).trigger('focus');
});

$('[contenteditable]').live('focus', function() {
before = $(this).text();
if($(this).attr('contenteditable') == "true") { $(this).css('border', '1px solid #ffd646'); }
//}).live('blur paste', function() {
}).live('blur', function() {
$(this).attr('contenteditable', 'false');
$(this).css('border', '1px solid #fafafa');
$(this).text($(this).text().replace(/(\r\n|\n|\r)/gm,""));

if (before != $(this).text()) { $(this).trigger('change'); }
}).live('keyup', function(event) {
// ESC=27, Enter=13
if (event.which == 27) {
$(this).text(before);
$(this).trigger('blur');
} else if (event.which == 13) {
$(this).trigger('blur');
}
});

$('[contenteditable]').live('change', function() {
var $thisText = $(this).text();
//Do something with the new value.
});
});

function clearSelection() {
if ( document.selection ) {
document.selection.empty();
} else if ( window.getSelection ) {
window.getSelection().removeAllRanges();
}
}

希望这对某人有帮助!!!

关于html - 如何创建一个 HTML5 单行 contentEditable 选项卡来监听 Enter 和 Esc,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11222213/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com