Question

在我的html中，我有一个文本区域和输入区域。

我的jquery正在尝试为span元素设置一些值。

<div class="col-xs-3">
    <span data-name="sstNumber" class="sstNumber">
        <textarea class="wt-resize" maxlength="50"  rows="1" cols="20"></textarea>
    </span>
    <br>
</div>

当我做document.querySelector('[data-name="sstNumber"]').textContent = "value";时，文本区域边框消失。如何显示该值，并且文本边框不会消失？

<div class="col-xs-3">
    <input type="text" name="sstnum" value="" size="20">
    <span data-name="sstNumber2" class="sstNumber2"></span>
    <br>
</div>

当我执行document.querySelector('[data-name="sstNumber2"]').textContent = "value2";时，值超出了框。如何在框中显示值？

Answer 1

如果要更改文本区域或输入字段的值，则必须直接定位元素并设置value属性。

像这样：

document.querySelector('span[data-name="sstNumber"] textarea').value = "value";

<div class="col-xs-3">
    <span data-name="sstNumber" class="sstNumber">
        <textarea class="wt-resize" maxlength="50"  rows="1" cols="20"></textarea>
    </span>
    <br>
</div>

此外，您没有使用jQuery，它是vanilla JavaScript。

Answer 2

您正在将值应用于错误的元素。如果您不希望textarea消失，则只需要定位实际的textarea元素即可。

document.querySelector('textarea.wt-resize').value = "value";

<div class="col-xs-3">
    <span data-name="sstNumber" class="sstNumber">
        <textarea class="wt-resize" maxlength="50"  rows="1" cols="20"></textarea>
    </span>
    <br>
</div>

Answer 3

边框消失的第一个问题是，您实际上使用：覆盖了span元素的内容：

document.querySelector('[data-name="sstNumber"]').textContent = "value";

由于textarea是span元素的子元素，因此将覆盖textarea。要解决此问题，请将textarea放在span元素之外：

 <span data-name="sstNumber" class="sstNumber"></span>
 <textarea class="wt-resize" maxlength="50"  rows="1" cols="20"></textarea>

如果要更改输入元素的值，则需要选择该元素而不是span元素：

document.querySelector('[name="sstnum"]').value = "value2";

html文本区域显示设置范围值

3 个答案: