javascript - Div 作为输入 Web/Mobile

Question

当我打开我的网站（https://scampsblog.com/code/openjarvis/two/index.html）时，会出现一个用户可以交互的div（例如输入“帮助”）。我的问题是，当有人在计算机上打开网站时，他们可以按预期输入，但通过智能手机打开网站会阻止他们进行任何互动。使用 contenteditable 解决了智能手机问题，但导致了一些奇怪的错误。这是我到目前为止的代码：

/*
//	Made with <3 by Marcus Bizal
//	github.com/marcbizal
//	linkedin.com/in/marcbizal
*/

$(document).ready(function() {
  "use strict";

  // UTILITY
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
  // END UTILITY

  // COMMANDS
  function clear() {
    terminal.text("");
  }

  function help() {
    terminal.append("There is no help... MUAHAHAHAHA. >:D\n");
  }

  function echo(args) {
    var str = args.join(" ");
    terminal.append(str + "\n");
  }

  function fortune() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://cdn.rawgit.com/bmc/fortunes/master/fortunes', false);
    xhr.send(null);

    if (xhr.status === 200) {
      var fortunes = xhr.responseText.split("%");
      var fortune = fortunes[getRandomInt(0, fortunes.length)].trim();
      terminal.append(fortune + "\n");
    }
  }
  // END COMMANDS

  var title = $(".title");
  var terminal = $(".terminal");
  var prompt = "";
  var path = ">";

  var commandHistory = [];
  var historyIndex = 0;

  var command = "";
  var commands = [{
    "name": "clear",
    "function": clear
  }, {
    "name": "help",
    "function": help
  }, {
    "name": "fortune",
    "function": fortune
  }, {
    "name": "echo",
    "function": echo
  }];

  function processCommand() {
    var isValid = false;

    // Create args list by splitting the command
    // by space characters and then shift off the
    // actual command.

    var args = command.split(" ");
    var cmd = args[0];
    args.shift();

    // Iterate through the available commands to find a match.
    // Then call that command and pass in any arguments.
    for (var i = 0; i < commands.length; i++) {
      if (cmd === commands[i].name) {
        commands[i].function(args);
        isValid = true;
        break;
      }
    }

    // No match was found...
    if (!isValid) {
      terminal.append("openjarvis: command not found: " + command + "\n");
    }

    // Add to command history and clean up.
    commandHistory.push(command);
    historyIndex = commandHistory.length;
    command = "";
  }

  function displayPrompt() {
    terminal.append("<span class=\"prompt\">" + prompt + "</span> ");
    terminal.append("<span class=\"path\">" + path + "</span> ");
  }

  // Delete n number of characters from the end of our output
  function erase(n) {
    command = command.slice(0, -n);
    terminal.html(terminal.html().slice(0, -n));
  }

  function clearCommand() {
    if (command.length > 0) {
      erase(command.length);
    }
  }

  function appendCommand(str) {
    terminal.append(str);
    command += str;
  }

  /*
  //	Keypress doesn't catch special keys,
  //	so we catch the backspace here and
  //	prevent it from navigating to the previous
  //	page. We also handle arrow keys for command history.
  */

  $(document).keydown(function(e) {
    e = e || window.event;
    var keyCode = typeof e.which === "number" ? e.which : e.keyCode;

    // BACKSPACE
    if (keyCode === 8 && e.target.tagName !== "INPUT" && e.target.tagName !== "TEXTAREA") {
      e.preventDefault();
      if (command !== "") {
        erase(1);
      }
    }

    // UP or DOWN
    if (keyCode === 38 || keyCode === 40) {
      // Move up or down the history
      if (keyCode === 38) {
        // UP
        historyIndex--;
        if (historyIndex < 0) {
          historyIndex++;
        }
      } else if (keyCode === 40) {
        // DOWN
        historyIndex++;
        if (historyIndex > commandHistory.length - 1) {
          historyIndex--;
        }
      }

      // Get command
      var cmd = commandHistory[historyIndex];
      if (cmd !== undefined) {
        clearCommand();
        appendCommand(cmd);
      }
    }
  });

  $(document).keypress(function(e) {
    // Make sure we get the right event
    e = e || window.event;
    var keyCode = typeof e.which === "number" ? e.which : e.keyCode;

    // Which key was pressed?
    switch (keyCode) {
      // ENTER
      case 13:
        {
          terminal.append("\n");

          processCommand();
          displayPrompt();
          break;
        }
      default:
        {
          appendCommand(String.fromCharCode(keyCode));
        }
    }
  });

  // Set the window title
  title.text("openjarvis setup");

  // Get the date for our fake last-login
  var date = ("setup");

  // Display last-login and promt
  terminal.append("openjarvis " + date + " \n");
  displayPrompt();
});

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  box-sizing: border-box;
}

textarea,
input,
button {
  outline: none;
}

.window-button,
.window .buttons .close,
.window .buttons .minimize,
.window .buttons .maximize {
  padding: 0;
  margin: 0;
  margin-right: 4px;
  width: 12px;
  height: 12px;
  background-color: gainsboro;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.5);
}

.window {
  animation: bounceIn 1s ease-in-out;
  width: 640px;
}

.window .handle {
  height: 22px;
  background: linear-gradient(0deg, #d8d8d8, #ececec);
  border-top: 1px solid white;
  border-bottom: 1px solid #b3b3b3;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: rgba(0, 0, 0, 0.7);
  font-family: Helvetica, sans-serif;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
}

.window .buttons {
  position: absolute;
  float: left;
  margin: 0 8px;
}

.window .buttons .close {
  background-color: #ff6159;
}

.window .buttons .minimize {
  background-color: #ffbf2f;
}

.window .buttons .maximize {
  background-color: #25cc3e;
}

.window .terminal {
  padding: 4px;
  background-color: black;
  opacity: 0.7;
  height: 218px;
  color: white;
  font-family: 'Source Code Pro', monospace;
  font-weight: 200;
  font-size: 14px;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow-y: auto;
}

.window .terminal::after {
  content: "|";
  animation: blink 2s steps(1) infinite;
}

.prompt {
  color: #bde371;
}

.path {
  color: #5ed7ff;
}

@keyframes blink {
  50% {
    color: transparent;
  }
}


/*@keyframes bounceIn {
    0% {
      transform: translateY(-1000px);
    }
    60% {
      transform: translateY(200px);
    }
    100% {
      transform: translateY(0px);
    }
  }*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>openjarvis</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


  <link rel="stylesheet" href="cmd.css">


</head>

<body>

  <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:200' rel='stylesheet' type='text/css'>
  <div class="container">
    <div class="window">
      <div class="handle">
        <div class="buttons">
          <button class="close">
								</button>
          <button class="minimize">
								</button>
          <button class="maximize">
								</button>
        </div>
        <span class="title"></span>
      </div>
      <div class="terminal"></div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" defer></script>



  <script src="cmd.js" defer></script>




</body>

</html>

标签： javascripthtmlcssinput