如果textarea为空，如何使按钮禁用
如果textarea为空，如何使按钮禁用
提问于 2022-07-08 18:05:38
我有一个文本区域，如下所示，当值为空时，“转换”和“清除值”按钮不活动/禁用，只有在textarea字段有值时，它们才会处于活动状态。
如果该值是手动清除的，则它已正常工作，但问题是，如果“清除值”函数用于清空文本区域值，则按钮仍处于活动状态。
如何解决在textarea字段被“清除值”函数清空时，这两个按钮变得不活跃的问题。因此，只有在textarea字段包含值时，它们才是活动的。
let $btn = document.querySelector('#convert')
$btn.addEventListener('click', function() {
let inputArr = document.querySelector('#inputTextarea').value.split('\n');
let $result = document.querySelector('#outputTextarea')
let number = 1
let final = []
for (row of inputArr) {
let rowArr = row.split(' | ')
let first = rowArr.shift().split(':')
let nrString = `+No.` + number
let mail = `Email: ${first[0]}`
let token = `Token: ${first[1]}`
rowArr.unshift(nrString, mail, token);
rowArr = rowArr.join('\n')
final.push(rowArr)
number++
}
let finalText = final.join('\n\n')
$result.value = finalText
});
//button copy result
let buttonCopy = document.getElementById("copyResult"),
input = document.getElementById("outputTextarea");
buttonCopy.addEventListener("click", function(event) {
event.preventDefault();
input.select();
document.execCommand("copy");
//alert("Result copied");
});
//Clear input textarea value
const inputTextarea = document.getElementById("inputTextarea");
const btnClear = document.getElementById('clearValue');
btnClear.addEventListener('click', function handleClick() {
inputTextarea.value = '';
});
//disable action button if textarea empty
$(document).ready(function() {
$('.inputTextarea textarea').keyup(function() {
var empty = false;
$('.inputTextarea textarea').each(function() {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('.actionTextarea button').attr('disabled', 'disabled');
} else {
$('.actionTextarea button').attr('disabled', false);
}
});
});<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<div class="container m-4">
<div class="form-group inputTextarea">
<label for="inputTextarea">Paste bulk text bellow</label>
<textarea class="form-control" id="inputTextarea" rows="3"></textarea>
</div>
<!-- Button trigger modal -->
<div class="actionTextarea">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalTextarea" id="convert" disabled>
Convert
</button>
<button type="button" class="btn btn-secondary" id="clearValue" disabled>Clear value</button>
</div>
</div>
<!--Result area-->
<!-- Modal -->
<div class="modal fade" id="modalTextarea" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Convert result</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<textarea class="form-control" id="outputTextarea" rows="8"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="copyResult">Copy Result</button>
</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2022-07-08 18:20:10
使用必需的和无效的选择器的普通旧html和CSS
form:invalid button {
pointer-events: none;
opacity: 0.3;
}<form>
<textarea required></textarea>
<button>click</button>
<button>click</button>
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72915354
复制相关文章
相似问题
腾讯云开发者
