Fatal编程技术网
  • javascript/
  • Javascript 如何使div内容（可能是输入、单选、复选框、数字滑块、下拉列表等）只读并在单击按钮时启用？

Javascript 如何使div内容（可能是输入、单选、复选框、数字滑块、下拉列表等）只读并在单击按钮时启用？

javascript jquery html

Javascript 如何使div内容（可能是输入、单选、复选框、数字滑块、下拉列表等）只读并在单击按钮时启用？,javascript,jquery,html,Javascript,Jquery,Html,我有一个包含内容的页面。它应该是只读的默认情况下，当我点击按钮，我应该能够编辑页面 注意：默认情况下，它应该是只读模式，甚至不允许使用任何键盘操作、鼠标操作和触摸操作进行编辑。您可以使用属性来实现它 HTML: <div contenteditable="false" id="makeItEdit">This is a paragraph. It is editable. Try to change this text.</div> $(document).ready

我有一个包含内容的页面。它应该是只读的默认情况下，当我点击按钮，我应该能够编辑页面

注意：默认情况下，它应该是只读模式，甚至不允许使用任何键盘操作、鼠标操作和触摸操作进行编辑。

您可以使用属性来实现它

HTML:

<div contenteditable="false" id="makeItEdit">This is a paragraph. It is editable. 
Try to change this text.</div>

$(document).ready(function(){

   $("#makeItEdit").on('click',function(event){

      $(this).attr('contenteditable',true);
   })

});
您不能使Div成为只读的，您可以做的是创建一个文本区域，并使其成为只读的

$("input, textarea").prop("readonly", true);  



<div>
  <input type="text" value="value" />  <br />
  <textarea>value</textarea>
  </div>

$（“输入，文本区域”）.prop（“只读”，true）；


价值
您可以使用
contentEditable
属性，从mdn获取更多详细信息

函数切换（）{
var div=document.getElementById（'content'）；
如果（div.contentEditable==='inherit'）{
div.contentEditable=true；
}否则{
if（div.contentEditable==true）{
div.contentEditable=false；
}否则{
div.contentEditable=true；
}
}
}

一些内容

切换
这是我给你的蛋糕：

$（“#编辑内容”）。单击（（）=>{
让内容=$（'div'）
设isEditable=content.is（'.editable'）；
prop（'contenteditable'，！isEditable）.toggleClass（'editable'）；
console.log（可编辑）；
});

.content{
填充：20px；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
}
.可编辑{
边框：1px纯蓝色；
}



Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着桌面出版而流行
Aldus PageMaker等软件，包括Lorem Ipsum版本。



编辑你能试试这个吗？。我认为您可以通过单击使div可编辑。
通过使用“HTML DOM contentEditable属性”



这是一段。单击按钮使我可编辑。
试试看


函数myFunction（）{
document.getElementById（“myP”）.contentEditable=true；
document.getElementById（“demo”）.innerHTML=“上面的p元素现在是可编辑的。请尝试更改其文本。”；
}

请添加代码。您应该添加您尝试过的内容，div的内容默认为只读。你的实际问题是什么？

<!DOCTYPE html>
    <html>
    <body>

    <div id="myP">This is a paragraph. Click the button to make me editable.</div>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
        document.getElementById("myP").contentEditable = true;
        document.getElementById("demo").innerHTML = "The p element above is now editable. Try to change its text.";
    }
    </script>

    </body>
    </html>