contenteditable实现可编辑文字不可删除新增节点代码
代码语言:html
所属分类:其他
代码描述:contenteditable实现可编辑文字不可删除新增节点代码
代码标签: three 无数 三维 立方体 上升 拼筹 堆叠 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Restricted Editing Example</title> <style> .editable { border: 1px solid #cccccc; padding: 10px; margin: 10px; min-height: 50px; } table{ border:1px solid red; width: 100%; } table td{ border:1px solid red; } </style> </head> <body> <div class="editable" contenteditable="true"> <p>这段文字是可以编辑的。请试着改变它,但新增文本是不允许的。</p> <p>你可以更改这段文字的内容,但是请在现有元素内操作。</p> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </div> <script> const editableDiv = document.querySelector('.editable'); editableDiv.addEventListener('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0