Disable keystrokes while writing-CodePudding

You can change the background color on my page with the "D" key. However, I want that when someone writes on the page that nothing happens, he should press the "D" key

Example: If he fills out a contact form, nothing should happen should he press the "D" key while writing

let DarkMode = false;

function toggleDarkMode() {
    var element = document.body;

    element.classList.toggle("darkmode");
    DarkMode = !DarkMode;

    if (DarkMode) {
        document.getElementById("toogle-checkbox").checked = false;
        Cookies.set("DarkMode", "Off");
    } else {
        document.getElementById("toogle-checkbox").checked = true;
        Cookies.remove("DarkMode");
    }
}


let keyPress = 68
window.addEventListener("keydown", checkKeyPress);

function checkKeyPress(key) {
    if (key.keyCode === keyPress) {
        play('click-sound')
        Cookies.set("DarkMode", "Off");
        toggleDarkMode()
    }
}

var DarkCookie = Cookies.get("DarkMode")
if (DarkCookie == 'Off') {
    CookieDarkMode = true;
    Darkmode = true;
    toggleDarkMode();
}

CodePudding user response：

Try using the isComposing property.

function checkKeyPress(key) {
    if (!key.isComposing && key.keyCode === keyPress) {
        play('click-sound')
        Cookies.set("DarkMode", "Off");
        toggleDarkMode()
    }
}

Failing this you could also leverage the event.target and .matches

function checkKeyPress(event) {
    if (!event.target.matches("input, textarea") && event.keyCode === keyPress) {
        play('click-sound')
        Cookies.set("DarkMode", "Off");
        toggleDarkMode()
    }
}

CodePudding user response：

let DarkMode = false;

function toggleDarkMode() {
  var element = document.body;

  element.classList.toggle("darkmode");
  DarkMode = !DarkMode;

  if (DarkMode) {
    document.getElementById("toogle-checkbox").checked = true;
  } else {
    document.getElementById("toogle-checkbox").checked = false;
  }
}

document.getElementById("toogle-checkbox").addEventListener('change', function() {
  toggleDarkMode()
});

window.addEventListener("keydown", checkKeyPress);

const inputan = document.querySelectorAll('.form-control');

let inputFocusCounter = 0;

inputan.forEach(el => {
  el.addEventListener('focus', function() {
    inputFocusCounter  ;
  });
  el.addEventListener('focusout', function() {
    inputFocusCounter--;
  });
});

const keyPress = 68;

function checkKeyPress(key) {
  if (inputFocusCounter == 0) {
    if (key.keyCode === keyPress) {
      toggleDarkMode();
    }
  }
}

body {
  padding: 1em;
}

.darkmode {
  background: #20262E;
}

body.darkmode {
  color: #fff !important;
}

<div >
  <label for="input">Input</label>
  <input type="text"  id="input">
</div>

<div >
  <label for="textarea">Input</label>
  <textarea name="" id="textarea" cols="30" rows="5" ></textarea>
</div>

<div >
  <div >
    <input type="checkbox"  id="toogle-checkbox">
    <label  for="toogle-checkbox">Dark Mode</label>
  </div>
</div>