Содержимое текстовой области не пусто после его удаления
У меня есть простая текстовая область в html, например:
<textarea name = "sitetitl" id = "sitetitle" class = "feld" maxlength = "255" data-check-length = "255">
</textarea>
Теперь предположим, что в этой текстовой области есть текст, потому что она загружает что-то из базы данных и помещает это туда:
<textarea name = "sitetitl" id = "sitetitle" class = "feld" maxlength = "255" data-check-length = "255">
Here is some text from the database
</textarea>
Теперь, когда я удаляю этот текст вручную, нажимая клавишу возврата на клавиатуре, текст удаляется визуально. Но когда я проверяю элемент, он все равно говорит, что там есть текст.
Проблема здесь в том, что есть специальная кнопка, которая появляется, когда в текстовой области нет текста. Это также работает по назначению. Эта кнопка имеет функцию, которая генерирует текст в этой текстовой области при нажатии. Если в этой области есть текст, появится всплывающее окно jquery, спрашивающее пользователя, хочет ли он переопределить текущий текст. Но текста нет, потому что я его удалил. Итак, всплывающее окно появляется, потому что при проверке элемента вы все равно можете увидеть текст, хотя я его удалил.
const $textfield = $('#sitetitle');
if ($textField.text().trim() !== '' || $textField.val().trim() !== '') {
console.info($textField.text().trim());
console.info($textField.val().trim());
overrideConfirmDialog($response, $textField, $generationButton, seoOptionPart);
} else {
$textField.text($response);
updateAllCheckFields();
}
«Но когда я проверяю элемент, он все равно говорит, что там есть текст». - да, из-за разницы между «атрибутом» и «свойством», см. stackoverflow.com/questions/6003819/…
Нам нужен от вас правильный минимально воспроизводимый пример , который иллюстрирует проблему, а не просто какое-то расплывчатое словесное объяснение.
Добавил небольшой фрагмент кода. Кстати, я использую jquery.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
<textarea> отличается от <input type='text'>, оба имеют атрибут value, но только textarea может иметь textContent между открывающим и закрывающим тегом.
Изменение текста внутри textarea приведет к изменению value, поэтому, если вы хотите создать какое-то условие на основе этого, вы можете сказать:
// jQuery
var textarea = $("textarea");
if (textarea.val()) // do this
else // do that
// javascript
const textarea = document.querySelector('textarea');
if (textarea.value) // do this
else // do that
чтобы продемонстрировать разницу, проверьте пример ниже:
Javascript
function check(){
const textarea = document.querySelector('textarea');
console.info('textContent = ', textarea.textContent);
console.info('value = ', textarea.value);
}
function changeText(){
const textarea = document.querySelector('textarea');
textarea.innerText = textarea.value;
console.info('textContent = ', textarea.textContent);
console.info('value = ', textarea.value);
}<p>Change the text then press the button</p>
<textarea name = "test" rows = "6" cols = "30">
Text from db
</textarea>
<br>
<button onclick = "check()">Check value and text</button>
<p>Press below button to change the text in DOM depending on enterd value</p>
<button onclick = "changeText()">Change text content</button>jQuery
function check(){
var textarea = $("textarea");
console.info('text() = ', textarea.text());
console.info('val() = ', textarea.val());
}
function changeText(){
var textarea = $("textarea");
textarea.text(textarea.val());
console.info('text() = ', textarea.text());
console.info('val() = ', textarea.val());
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<p>Change the text then press the button</p>
<textarea name = "test" rows = "6" cols = "30">
Text from db
</textarea>
<br>
<button onclick = "check()">Check value and text</button>
<p>Press below button to change the text in DOM depending on enterd value</p>
<button onclick = "changeText()">Change with text()</button>Это означает, что всякий раз, когда DOM анализируется и загружается, textContent между открывающим и закрывающим тегом textarea никогда не изменится, если вы не добавите код для его изменения, а как только вы измените textContent, значение будет изменено соответственно.
Спасибо за разъяснения, я добавил код jQuery.
Как сказал @freedomn-m, я использую jquery. Мой неопытный я отметил JavaScript, прошу прощения за путаницу. В моем jquery я сейчас проверяю условие if ($textfield.text().trim() !== '' || if ($textfield.val().trim() !== '') Я отредактирую это в мой вопрос.
вам нужно проверять только val(), т. е. if ($textfield.val().trim() !== ''), потому что, если вы проверите .text(), он всегда будет возвращаться true, потому что text всегда будет там, как я объяснил в своем ответе.
Укажите код, чтобы получить более эффективную помощь.