【问题标题】:Javascript contentEditable of certain classes only [closed]Javascript内容仅可编辑某些类[关闭]
【发布时间】:2020-10-16 12:57:44
【问题描述】:

我有以下使 HTML 页面可编辑的脚本

document.body.contentEditable = 'true'; document.designMode='on';

我只想允许我的用户编辑具有“编辑”类的部分。这可能吗?

【问题讨论】:

  • @IslamElshobokshy 谁说他自己还没有尝试过?
  • @Luke_ 您需要提供您尝试过的代码,如果没有提供,则假定他没有尝试过。

标签: javascript contenteditable


【解决方案1】:

是的,这是可能的。

let el_array = document.getElementsByClassName('edit');

然后循环 el_array 并将其应用于每个元素 el.contentEditable = true;


【讨论】:

    【解决方案2】:

    是的,这是可能的,只需使用编辑类对所有元素运行一个简单的循环,并为它们设置 contentEditable true

    [...document.getElementsByClassName("edit")].forEach(
      el => el.contentEditable = "true"
    );
    
    

    就是这样!

    编辑:正如 harry 在 cmets 中提到的:forEach 不适用于 htmlCollection 对象,因此您必须使用 [...theHTMLCollection] 将其转换为数组

    【讨论】:

    • forEach 不适用于 getElementsByClassName
    • 啊,是的,我忘记了,更正了!
    【解决方案3】:

    function edit_content(){
      document.querySelectorAll('.myP').forEach(function(ele){
          ele.contentEditable = 'true';
      })
    }
    <p class="myP">
    abcdefghijklmnop
    </p>
    
    <button onclick="edit_content()">
    Click to edit
    </button>

    你可以这样做。首先,通过querySelectorAll 选择DOM 中的所有类,然后从forEach 循环中对其进行迭代。

    【讨论】:

      【解决方案4】:

      您可以尝试查找类名为“edit”的所有元素,然后将它们全部更改,如下所示。

      document.querySelectorAll('.edit').forEach(function(element){
          element.contentEditable = 'true';
      })
      

      【讨论】:

        猜你喜欢
        • 2011-10-09
        • 2011-02-21
        • 1970-01-01
        • 2011-05-09
        • 1970-01-01
        • 2017-06-07
        • 2015-06-04
        • 2013-04-02
        • 1970-01-01
        相关资源
        最近更新 更多