javascript - Content Editable = true,但一次只取一个值
问题描述
我正在做一个简单的项目,我需要使列表中的项目可编辑,然后更新一个 JS 项目来存储它。
我正在使用 Content Editable = True,当我注释掉我的 handleItemEdit 函数时它可以工作,但是当我打开它时,我一次只能插入一个字符,迫使我继续点击编辑。
显然这个问题源于我的功能,但我似乎无法弄清楚为什么。
//Responsible for listening for an edit and updating my object with the new text.
function handleEditItem() {
$('.js-shopping-item').on('input', function(event) {
const itemIndex = getItemIndexFromElement(event.currentTarget); //assigning the index of the the editted item to itemIndex
const updatedItem = STORE.items[itemIndex];
updatedItem.name = event.currentTarget.innerHTML;
renderShoppingList();
});
}
//Returns the index of an Item in the Store
function getItemIndexFromElement(item) {
const itemIndexString = $(item)
.closest('.js-item-index-element')
.attr('data-item-index');
return parseInt(itemIndexString, 10);
}
//Function responsible for returning the template HTHML to insert into the html.
function generateItemElement(item) {
let itemIndex = STORE.items.indexOf(item);
return `
<li class="js-item-index-element" data-item-index="${itemIndex}">
<span contentEditable='true' class="shopping-item js-shopping-item ${item.checked ? 'shopping-item__checked' : ''}">${item.name}</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle js-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete js-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>`;
}
解决方案
推荐阅读
- c - NetworkByteOrder 是否与 Big endian 相同?
- java - 当控制器的返回类型为接口的 Mono 时,返回值不会将返回值转换为 json,在 webflux 中
- perl - 下面的代码会不会有任何字符串注入
- angular - 通过搜索栏从 Firestore 查询数据
- jquery - 我想用最少的功能调用多个弹出窗口
- javascript - 是否有其他方法可以使用 Jquery 删除父表行和子表行
- c++ - 按标签分隔输入
- ssl - 如何使用自签名证书嗅探从客户端到某个网站的加密流量?
- bison - 我必须手动修复 Yacc 中的移位/减少问题吗?
- javascript - 如何创建具有动态选项的 Bootstrap 4 可搜索下拉框