现在正在慢慢提高我的 javascript 和 jquery 技能,我一直在尝试使用 .val('') 重置文本区域,但发现在重置后我无法附加到它。
var console = $('#console');
function Initialize(data){
console.text(data);
};
function AddText(data){
console.append(data);
};
function clearConsole(){
console.val('');
};
现在,如果我将 console.text(data)
更改为 console.val(data)
那么我根本无法追加,而只能设置值。现在我也知道有更多的方法可以从文本区域获取文本,例如 .value()
,但我并没有乱搞那么多,因为我的代码是通过使用 来工作的>.text('')
而不是 .val('')
但我遇到了一些非常奇怪的行为,这些行为更容易显示而不是输入描述:
var ta, tb, tc;
$(document).ready(function() {
ta = $('#ta');
tb = $('#tb');
tc = $('#tc');
});
//first textarea
function AddText() {
if (ta.text()) {
ta.append(Math.random() + "\n");
} else {
ta.text(Math.random() + "\n");
}
};
function ClearText() {
ta.text('');
}
//second textarea
function AddVal() {
tb.append(Math.random() + "\n");
};
function ClearVal() {
tb.val('');
}
//third textarea
function AddVal2() {
if (tc.val()) {
tc.append(Math.random() + "\n");
alert('Append is being called, but not appending.');
} else {
tc.val(Math.random() + "\n");
}
};
function ClearVal2() {
tc.val('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<p> Using .text to initialize the textarea allows .append and clearing</p>
<textarea readonly cols=50 rows=5 placeholder="First textarea : A" id="ta"></textarea>
<br>
<button type="button" id="AddText" onclick="AddText()">Add Text</button>
<button type="button" id="ClearText" onclick="ClearText()">Clear</button>
<br>
<p>Using .val to initialize the textarea does not allow .append after clearing</p>
<textarea readonly cols=50 rows=5 placeholder="Second textarea : B" id="tb"></textarea>
<br>
<button type="button" id="AddVal" onclick="AddVal()">Add Text</button>
<button type="button" id="ClearVal" onclick="ClearVal()">Clear</button>
<br>
<p>Using .val to initialize the textarea with the extra checks doesn't append at all.
<br>An alert is generated to show the append is called, but no appending occurs.</p>
<textarea readonly cols=50 rows=5 placeholder="Third textarea : C" id="tc"></textarea>
<br>
<button type="button" id="AddVal2" onclick="AddVal2()">Add Text</button>
<button type="button" id="ClearVal2" onclick="ClearVal2()">Clear</button>
有人可以向我解释这种行为和使用的最佳实践吗?还是一切都一样,只是取决于偏好?谢谢。
编辑: Bonus jfiddle
最佳答案
我不知道为什么 .val
之后不允许使用 .append
但您不应该使用 .append
。 .append
用于附加元素而不是文本。
.text
用于设置 innerHTML 并转义该 HTML,使其显示为纯文本。
.val
是你应该使用的,即使是文本区域也是如此。
要附加 .val,只需执行
$el.val($el.val() + "\nnew content");
另外,应该注意的是,您选择的变量名称 console
将隐藏同名的全局变量(让您登录到 F12 开发人员工具)。
关于javascript - 为什么附加文本区域只适用于 .text 而不是 .val?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37979951/