javascript - 即使删除只读后也无法使 TextArea 可编辑 : Html

Question

JavaScript:

var editBtn = document.getElementById('editBtn');
var saveBtn = document.getElementById('saveBtn');
var textAreaHtml = document.getElementsByTagName("textarea");

editBtn.addEventListener('click', function (e) {
    textAreaHtml[0].removeAttribute('readonly');
    textAreaHtml[0].readOnly = 'false';
});

saveBtn.addEventListener('click', function (e) {
    textAreaHtml[0].removeAttribute('readonly');
    textAreaHtml[0].readOnly = 'true';
});

HTML:

<div class="panel-body">
        <div>
            <input type="text" name="apexClass" id="autocomplete" placeholder="Type the name of the Apex class you want to edit"/>
        </div>
        <div class="btn-group-vertical" style="padding: 1%">
            <button type="button" class="btn btn-primary" id="editBtn">Edit</button>
            </button>
        </div>
        <div class="tab-content" align="left">

            <div id='error' style='display:none'>{{apexClassWrapperError.message}}</div>

            <div>{{apexClassWrapper.name}}</div>
            <pre class="prettyprint">
                <code class="language-java">
                    <textarea ng-model="apexClassWrapper.body" id="apexBody" readonly="true">{{apexClassWrapper.body}}</textarea>
                </code>
            </pre>
        </div>
        <button type="button" class="btn btn-primary" id="saveBtn" ng-click="postdata(apexClassWrapper)">Save</button>
    </div>

我有两个按钮，保存和编辑。我已放置用于编辑和保存的事件监听器以使文本区域可编辑，但这不起作用。我无法在 UI 中编辑 TextArea？我有什么遗漏的吗？

Answer 1

对您的点击事件处理程序进行一些轻微的调整，您应该可以正常工作了。

editBtn.addEventListener('click', function (e) {
    textAreaHtml[0].removeAttribute('readonly');    
});

saveBtn.addEventListener('click', function (e) {
    textAreaHtml[0].setAttribute('readonly', true);
});

您的编辑按钮将 readOnly 设置为 false，但 readonly 是一个 bool 属性。当它存在时，无论它的值是 true 还是 false，它都会使文本区域只读。