Question

现在慢慢处理我的javascript和jquery技能，我一直试图用.val（''）重置一个textarea，发现我在重置后无法附加它。

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)，那么我根本无法追加，而是只能设置值。现在我也知道有更多的方法可以从textarea中获取文本，例如.value()，但我没有弄乱那么多，因为我使用.text('')而不是{我的代码工作了{1}}

但我遇到了一些非常奇怪的行为，更容易展示而不是输入描述：

.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('');
}

有人可以向我解释这种行为和使用的最佳做法吗？或者它是否真的一样，这取决于偏好？感谢。

编辑： Bonus jfiddle

Answer 1

我不知道为什么在.append之后不允许.val，但您不应该使用.append。 .append用于附加元素而非文字。

.text用于设置innerHTML并转义该HTML，使其显示为纯文本。

.val就是你应该使用的东西，即使对于textareas也是如此。

要附加.val，只需执行

$el.val($el.val() + "\nnew content");

此外，应该注意的是，您选择的变量名称console将使用相同的名称隐藏全局变量（让您登录到F12开发人员工具）。

Answer 2

你的追加是有效的，你只是因为一个奇怪的怪癖而没有看到它们。怪癖是append设置了text属性，但如果您清除val，则text将不再可见。

您可以通过将console.log(tb.text(), tb.val())添加到AddVal()来自行查看。将类似日志添加到其他功能也可能有所帮助。

这里真正有趣的问题是为什么以这种方式运作，而且我害怕我不得不离开那些知识更深的人。

Answer 3

input是一个带有单个值的html字段：

<input value='whatever' />

但textarea有内容：

<textarea>this is the content that can be added to</textarea>

如此松散地认为textarea是一个可以添加的文本块，input是一个可以定义的变量

为什么附加textarea只能使用.text而不是.val？

3 个答案: