如何使提交按钮在 html 中“打印”内容，并在与 a 相同的行中输入宽度为 100% 的文本<span>，</span><p> <span>，或者</span><div> <span>?</span>

Question

These are my files:这些是我的文件：

 .dir { color: white; font-family: "Lucida Console", Monaco, monospace; font-size: 16px; } .cmdline { font-family: "Lucida Console", Monaco, monospace; background-color: black; border: 1px solid black; color: white; font-size: 16px; width: 100%; } .cmdline:focus { outline: none !important; border: 1px solid black; } .blink_text { -webkit-animation-name: blinker; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; color: white; } @-moz-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }

 <!DOCTYPE html> <!--<>--> <!--<ink rel="stylesheet" type="text/css" href="interface.css">--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <!--</>--> <body style="background-color:black;"> <span class="dir">~/Link/Hydrogen/Helium/Lithium></span> <input class="cmdline" autofocus> <input type="submit" style="visibility: hidden;" /> </body>

Ignore the comments... So how do I make it so that when a command is entered, something will be printed?忽略评论... 那么我该如何制作，以便在输入命令时，会打印一些内容？ Similar to telehack.com ?类似于telehack.com吗？ I'm I am also having a problem where I can't seem to make an input with 100% width in the same line as a span , p , or div .我也遇到了一个问题，我似乎无法在与span 、 p或div同一行中输入宽度为 100% 的输入。 Thanks in advance提前致谢

Answer 1

Your Second Question你的第二个问题

To put the input field beside the directory I wrapped them both in a <table> :要将输入字段放在目录旁边，我将它们都包装在<table> ：

CSS CSS

.intable {
  width: 100%;
}

HTML HTML

<span id="output" class="dir"></span>
<form id="inform" autocomplete="off">
  <table class="intable">
    <tr>
      <td>
        <span class="dir" id="directory">~/Link/Hydrogen/Helium/Lithium></span>
      </td>
      <td style="width: 100%">
        <input class="cmdline" id="inbox" autofocus>
      </td>
    </tr>
  </table>
  <input type="submit" style="visibility: hidden;" />
</form>

(I'll explain the <form> soon) （我将很快解释<form> ）

Your First Question你的第一个问题

Getting Input获取输入

The reason that I put it all in a form was so that retreiving input would be easy:我将所有内容都放在一个表单中的原因是这样检索输入会很容易：

$(document).ready(function() {
  $("#inform").submit(function(e) { //Listen for the user to enter text
    e.preventDefault();             //Keep page from reloading
    var input = $("#inbox").val();  //get entered text
    $("#inbox").val("");            //I assume you want to blank this out afterwards
    printSomething(input);          //Process input and print to page
  });
});

Printing Output打印输出

I added the <span id="output" class="dir"></span> so there would be a place to write the output.我添加了<span id="output" class="dir"></span>所以会有一个地方来写输出。

function printSomething(input)
{
  //Put the directory text + user's input at head of output
  var output = $("#directory").html() + input + "<br />";

  //Replace this bit with your own processing
  if(input.length > 0)
  {
    output += "You entered: " + input;
  } else {
    output += "You didn't enter anything!"
  }
  //So that directory will be on newline, because span does not automatically do that
  output += "<br />";

  //ADD the new content to the output
  $("#output").append(output);
}

 $(document).ready(function() { $("#inform").submit(function(e) { e.preventDefault(); //Keep page from reloading var input = $("#inbox").val(); //get entered text $("#inbox").val(""); //I assume you want to blank this out afterwards printSomething(input); }); }); function printSomething(input) //You were a little vague... { var output = $("#directory").html() + input + "<br />"; //Replace this bit with your own processing if (input.length > 0) { output += "You entered: " + input; } else { output += "You didn't enter anything!" } output += "<br />"; $("#output").append(output); }

 .dir { color: white; font-family: "Lucida Console", Monaco, monospace; font-size: 16px; } .cmdline { font-family: "Lucida Console", Monaco, monospace; background-color: black; border: 1px solid black; color: white; font-size: 16px; width: 100%; } .cmdline:focus { outline: none !important; border: 1px solid black; } .blink_text { -webkit-animation-name: blinker; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; color: white; } .intable { width: 100%; } @-moz-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <body style="background-color:black;"> <span id="output" class="dir"></span> <form id="inform" autocomplete="off"> <table class="intable"> <tr> <td> <span class="dir" id="directory">~/Link/Hydrogen/Helium/Lithium></span> </td> <td style="width: 100%"> <input class="cmdline" id="inbox" autofocus> </td> </tr> </table> <input type="submit" style="visibility: hidden;" /> </form> </body>

如何使提交按钮在 html 中“打印”内容，并在与 a 相同的行中输入宽度为 100% 的文本<span>，</span><p> <span>，或者</span><div> <span>?</span>

问题描述

1 个解决方案

解决方案1
0 已采纳

如何使提交按钮在 html 中“打印”内容，并在与 a 相同的行中输入宽度为 100% 的文本<span>，</span><p> <span>， 或者</span><div> <span>?</span>

问题描述

1 个解决方案

解决方案1 0 已采纳

如何使提交按钮在 html 中“打印”内容，并在与 a 相同的行中输入宽度为 100% 的文本<span>，</span><p> <span>，或者</span><div> <span>?</span>

解决方案1
0 已采纳