Js编辑技巧

JavaScript（Js）编辑技巧主要涉及在网页中对数据进行交互式编辑，特别是在处理表格数据时。本技巧聚焦于如何利用`onkeyup`和`onblur`事件来优化用户体验，同时解决在编辑过程中可能出现的问题。 一、`onkeyup`和`onblur`事件 1. `onkeyup`事件：该事件在用户释放键盘按键时触发，常用于实时检测用户输入，如搜索框的实时搜索功能。在本例中，`onkeyup`事件被用来监听回车键的按下，当用户按下回车键时，会触发处理编辑结果的逻辑。 2. `onblur`事件：此事件在元素失去焦点时触发，意味着用户从当前元素转移到了其他元素或页面的其他部分。在编辑场景下，`onblur`事件通常用于保存或验证用户在文本框中所做的修改。然而，如果在编辑过程中需要执行其他操作（如删除或新增行），`onblur`事件可能会产生干扰。 二、解决`onblur`事件的冲突 当文本框覆盖在表格行上时，如果用户点击了删除或添加按钮，`onblur`事件会先于按钮的点击事件触发。为解决这个问题，可以检查鼠标点击点的纵坐标是否大于图层底部坐标。如果是，则忽略`onblur`事件，允许删除或添加新行的操作执行。这需要在`onblur`事件处理函数中添加相应的判断逻辑。 三、页面布局与主要代码 1. 页面布局：示例代码展示了如何创建一个包含滚动图层的页面结构，其中包含一个表格用于显示数据，以及两个按钮分别用于删除和添加行。工作区域（`workdiv`）设置了`overflow:scroll`属性，使得表格可以在需要时滚动。`inptxt`文本框是隐藏的，当用户编辑表格单元格时会显示出来。 2. JS代码： - `delrowclick()`函数：负责删除选定的表格行。 - `addrowclick()`函数：用于在表格中添加新行。 - `inpkeyup()`函数：监听`onkeyup`事件，当检测到回车键时，处理编辑结果。 - `inpblur()`函数：处理`onblur`事件，这里需要添加额外的逻辑来避免在点击删除或添加按钮时触发。 在实际应用中，`inpblur()`函数可能需要这样实现： ```javascript function inpblur() { const mouseY = event.clientY; const layerBottom = document.getElementById('workdiv').getBoundingClientRect().bottom; if (mouseY > layerBottom) { // 点击位置在图层底部以下，允许执行删除或添加操作 return; } // ...处理其他非删除或添加操作的情况，如保存编辑结果 } ``` 通过这样的设计，我们能确保在保持用户编辑体验的同时，正确处理其他交互，比如删除和添加行。这些技巧对于构建富交互性的Web应用程序至关重要，特别是那些需要用户动态修改数据的场景。