今天给大家分享一下我做textarea只读属性设置的一些小实践，希望能帮到大家。
事情是这样的，最近在做一个项目，有个需求是让textarea里的内容只展示，不能让用户修改。当时我就想，这还不简单？
我想到的是用readonly属性。
直接在textarea标签里加上`readonly="readonly"`，像这样：
试一下，确实可以只读，鼠标点进去也没法编辑，挺
然后，我又想到另一种方法，用disabled属性。
如果用`disabled="disabled"`，就像这样：
也能实现只读的效果。但是，我发现用disabled后，textarea的样式会变灰，而且也没法复制里面的内容，体验不太我还是决定用readonly。
我想看看用JQuery怎么搞。
毕竟现在很多项目都用JQuery，用JQuery设置readonly也很方便，直接一句代码搞定：
javascript
$("#textareaID").prop("readonly", true);
把`#textareaID`换成你textarea的id就行，贼简单。
后来我又试试用setAttribute方法，也能实现同样的效果：
javascript
*("textareaID").setAttribute("readonly", "readonly");
也是先把textarea的id获取到，然后设置readonly属性。
总结一下这几种方法：
- HTML直接加`readonly="readonly"`：简单粗暴，直接有效。
- HTML直接加`disabled="disabled"`：虽然也能只读，但是样式不好看，不推荐。
- JQuery用`prop("readonly", true)`：方便快捷，代码简洁。
- JS用`setAttribute("readonly", "readonly")`：也能实现，稍微麻烦点。
我个人比较推荐直接用HTML加`readonly`或者用JQuery的`prop`方法，简单又好用。大家可以根据自己的项目情况选择合适的方法。
对，还有个小坑要注意，如果你用的是一些UI框架，比如Vue或者React，可能设置readonly的方式不太一样，要看框架的文档。比如在Vue里，你可能会这样写：
然后，在data里定义一个`isReadOnly`变量，控制textarea是否只读。这个要根据具体情况来。
好，今天的分享就到这里，希望能帮到大家，以后再遇到类似的问题，就能轻松解决。
