如何清除文本输入并在 JavaScript 中重新聚焦

Question

在我的代码中，如果文本输入字段为空，我想禁用该按钮。 它工作正常。 但是当我添加代码以清除并重新聚焦输入框时，它会启用按钮，这允许用户通过单击按钮创建空的 div。 在这里，我附上了我的整个 JavaScript 代码，请有人帮助我按照我的意愿完成这项工作。

custom_script.js

const subBtn = document.getElementById("btn");
const inptTxt = document.getElementById("text");
const contDiv = document.getElementById("container");

//check input box is empty or not and enable Colorize button
subBtn.disabled = true

inptTxt.addEventListener('input', evt => {
    const value = inptTxt.value.trim()

    if (value) {
        inptTxt.dataset.state = 'valid'
        subBtn.disabled = false
    } else {
        inptTxt.dataset.state = 'invalid'
        subBtn.disabled = true
    }
})

var xhttp = new XMLHttpRequest();

subBtn.addEventListener("click",function(){

    xhttp.onload=function() {
        var crd = document.createElement("div");
        var div = contDiv.getElementsByTagName("div");
        var crdCount = div.length;
        crd.setAttribute("id", "card" + crdCount);
        crd.innerHTML = inptTxt.value;

        //change html title with input text
        document.title = inptTxt.value;

        contDiv .appendChild(crd);
        document.getElementById("card" + crdCount).style.background = JSON.parse(this.responseText).color;  

        //getting inverse value of hex color
        const inv = (hex) => '#' + hex.match(/[a-f0-9]{2}/ig).map(e => (255 - parseInt(e, 16) | 0).toString(16).replace(/^([a-f0-9])$/, '0$1')).join('')
        const invert = () =>
        document.querySelectorAll('circle')
        .forEach(c => 
        (hex = c.getAttribute('fill')) && 
        c.setAttribute('fill', inv(hex))
        )
        var invColor = inv(JSON.parse(this.responseText).color);

        //setting the inverse value to card text
        var crdText = document.getElementById("card" + crdCount).innerHTML;
        var setColor = "<span style='color:" + invColor + "'>" + crdText + "</span>";
        document.getElementById("card" + crdCount).innerHTML = setColor;

        //clear input and refocus
        inptTxt.value = "";
        inptTxt.focus();
        inptTxt.select();
    };

    xhttp.onerror=function() {
        var crd = document.createElement("div");
        var div = contDiv.getElementsByTagName("div");
        var crdCount = div.length;
        crd.setAttribute("id", "card" + crdCount);
        crd.innerHTML = inptTxt.value;

        //change html title with input text
        document.title = inptTxt.value;

        contDiv .appendChild(crd);
        document.getElementById("card" + crdCount).style.background = "#6d4298";  

        var crdText = document.getElementById("card" + crdCount).innerHTML;
        var setColor = "<span style='color:#ffffff'>" + crdText + "</span>";
        document.getElementById("card" + crdCount).innerHTML = setColor;
    };

    xhttp.open("GET","http://api.creativehandles.com/getRandomColor");
    xhttp.send(); 

})

//submit quote using Enter key
inptTxt.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
    event.preventDefault();
    subBtn.click();
  }
});

Answer 1

这是一个简单的输入和按钮片段。

我使用onInput事件来检测输入何时发生变化。 当它发生时，我只是将按钮的disable属性设置为输入是否为空的答案。

请注意，我正在使用disabled属性初始化按钮，因为在开始时它应该被禁用。

 let button = document.getElementById('button'); let input = document.getElementById('input'); function doSomething() { input.value = ''; input.focus(); inputHasChanged(); } function inputHasChanged() { button.disabled = input.value === ''; }

 <button disabled id="button" onclick="doSomething()">click</button> <input id="input" type="text" onInput="inputHasChanged()">

Answer 2

因为通过 javascript 设置input的value不会触发它的input事件。

您需要在设置其值后手动触发其事件。

这是解决方案，请注意标有FIX的注释：

const subBtn = document.getElementById("btn");
const inptTxt = document.getElementById("text");
const contDiv = document.getElementById("container");

//check input box is empty or not and enable Colorize button
subBtn.disabled = true

// FIX: make a dedicated function for validation
function validateInput() {
    const value = inptTxt.value.trim()

    if (value) {
        inptTxt.dataset.state = 'valid'
        subBtn.disabled = false
    } else {
        inptTxt.dataset.state = 'invalid'
        subBtn.disabled = true
    }
}

// FIX: call the validation function when the input is changed
inptTxt.addEventListener('input', validateInput);

var xhttp = new XMLHttpRequest();

subBtn.addEventListener("click", function () {

    xhttp.onload = function () {
        var crd = document.createElement("div");
        var div = contDiv.getElementsByTagName("div");
        var crdCount = div.length;
        crd.setAttribute("id", "card" + crdCount);
        crd.innerHTML = inptTxt.value;

        //change html title with input text
        document.title = inptTxt.value;

        contDiv.appendChild(crd);
        document.getElementById("card" + crdCount).style.background = JSON.parse(this.responseText).color;

        //getting inverse value of hex color
        const inv = (hex) => '#' + hex.match(/[a-f0-9]{2}/ig).map(e => (255 - parseInt(e, 16) | 0).toString(16).replace(/^([a-f0-9])$/, '0$1')).join('')
        const invert = () =>
            document.querySelectorAll('circle')
                .forEach(c =>
                    (hex = c.getAttribute('fill')) &&
                    c.setAttribute('fill', inv(hex))
                )
        var invColor = inv(JSON.parse(this.responseText).color);

        //setting the inverse value to card text
        var crdText = document.getElementById("card" + crdCount).innerHTML;
        var setColor = "<span style='color:" + invColor + "'>" + crdText + "</span>";
        document.getElementById("card" + crdCount).innerHTML = setColor;

        //clear input and refocus
        inptTxt.value = "";
        inptTxt.focus();
        inptTxt.select();
        // FIX: call the validation function when the input is cleared
        validateInput();
    };

    xhttp.onerror = function () {
        var crd = document.createElement("div");
        var div = contDiv.getElementsByTagName("div");
        var crdCount = div.length;
        crd.setAttribute("id", "card" + crdCount);
        crd.innerHTML = inptTxt.value;

        //change html title with input text
        document.title = inptTxt.value;

        contDiv.appendChild(crd);
        document.getElementById("card" + crdCount).style.background = "#6d4298";

        var crdText = document.getElementById("card" + crdCount).innerHTML;
        var setColor = "<span style='color:#ffffff'>" + crdText + "</span>";
        document.getElementById("card" + crdCount).innerHTML = setColor;
    };

    xhttp.open("GET", "http://api.creativehandles.com/getRandomColor");
    xhttp.send();

})

//submit quote using Enter key
inptTxt.addEventListener("keyup", function (event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        subBtn.click();
    }
});