文本区域出现问题

Question

我有一个简单的文本框。当你点击按钮时，如果你的文本框为空，我想要检查这个区域是否有文本，并用默认电子邮件填充它。

const btn = document.getElementById('btn');
let x = document.getElementById('smth');

function putDefaultMail() {
  if (x.textContent != null) {
    x.textContent = '[e-mail]';
  }
}

btn.addEventListener('click', function(e) {
  e.preventDefault();
  putDefaultMail();
});

<form>
  <textarea id="smth"></textarea>
  <button id="btn">Sumbit</button>
</form>

但是出了些问题，它只调用了一次。

- Freeman

---

请编辑您的标题以概括您的问题。 - Someone_who_likes_SE

文本区域具有“value”属性。 - epascarello

Answer 1

textContent 不是从 textarea 中获取值的正确方式。此外，空白的 textarea 的值是 ""，而不是 null。

const btn = document.getElementById('btn');
let x = document.getElementById('smth');

function putDefaultMail() {
    if (x.textContent != null) {
        x.textContent = '[e-mail]';
    }
}

btn.addEventListener('click', function (e) {
    e.preventDefault();
    putDefaultMail();
});

<form>
                    <textarea id="smth"></textarea>
                    <button id="btn">Sumbit</button>
</form>

相反，尝试使用 .value：

const btn = document.getElementById('btn');
let x = document.getElementById('smth');

function putDefaultMail() {
    if (x.value == '') {
        x.value = '[e-mail]';
    }
}

btn.addEventListener('click', function (e) {
    e.preventDefault();
    putDefaultMail();
});

<form>
                    <label>Text: <textarea id="smth"></textarea></label>
                    <button id="btn">Sumbit</button>
</form>

顺便说一下，您应该像上面那样为控件添加标签。

但是，如果用户输入空格，则可以通过。就像下面@MuhammadAliMalekzadeh所说的那样，trim()应该为您删除周围的空格。

const btn = document.getElementById('btn');
let x = document.getElementById('smth');

function putDefaultMail() {
    if (x.value
      .trim() // <-- here
    == '') {
        x.value = '[e-mail]';
    }
}

btn.addEventListener('click', function (e) {
    e.preventDefault();
    putDefaultMail();
});

<form>
                    <label>Write here: <textarea id="smth"></textarea></label>
                    <button id="btn">Sumbit</button>
</form>

- Someone_who_likes_SE

---

太棒了！谢谢。它可以工作了！ - Freeman

最好使用trim()函数。如果用户在textarea中点击空格按钮，在点击submit按钮后，textarea将不会填充默认的电子邮件。 - Muhammad Ali Malekzadeh

@MuhammadAliMalekzadeh 已更新。 - Someone_who_likes_SE

Answer 2

有一个值。您应该检查该值是否为空。

const btn = document.getElementById('btn');
let x = document.getElementById('smth');

function putDefaultMail() {
    if (x.value == "") { // if empty 
        x.value = '[e-mail]';
    }
}


btn.addEventListener('click', function (e) {
    e.preventDefault();
    putDefaultMail();
});

- Muhammedogz

---

但它是一个输入类型的提交，所以如果你不使用e.preventDefault()，它将会提交表格。 - Someone_who_likes_SE

@Someone_who_likes_SE 你说得对。 :) - Muhammedogz