Is there a way to create submit buttons that trigger printing in HTML? Additionally, how can I design a text input that spans 100% width on the same line as a <span>, <p>, or <div>?

Question

Is there a way to create submit buttons that trigger printing in HTML? Additionally, how can I design a text input that spans 100% width on the same line as a <span>, <p>, or <div>?

These are the files I have:

.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>

Disregard the comments... How can I create a functionality where entering a command will trigger a response to be printed? Kind of like what's seen on telehack.com? Additionally, I need help figuring out how to make an input with 100% width appear in the same line as a span, p, or div. Appreciate any assistance in advance.

javascript jquery html css

Answer 1

Answer №1

Your Second Query

In order to align the input field next to the directory, I enclosed them both within a <table>:

CSS Styles

.intable {
  width: 100%;
}

HTML Structure

<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>

(Explanation about the <form> will follow shortly)

Your Initial Inquiry

Fetching User Input

The rationale behind enclosing everything in a form was for easier retrieval of user input:

$(document).ready(function() {
  $("#inform").submit(function(e) { //Listen for user input
    e.preventDefault();             //Prevent page reload
    var input = $("#inbox").val();  //Retrieve entered text
    $("#inbox").val("");            //Assuming you want to clear this after use
    printSomething(input);          //Process and output input
  });
});

Displaying Output

I included the

<span id="output" class="dir"></span>

as a placeholder for displaying the output.

function printSomething(input)
{
  //Combine directory text with user's input for output
  var output = $("#directory").html() + input + "<br />";

  //Customize this section according to your processing needs
  if(input.length > 0)
  {
    output += "You typed: " + input;
  } else {
    output += "No input provided!"
  }
  //Add line break to move directory to new line, since span doesn't do it automatically
  output += "<br />";

  //Append the new content to the output display area
  $("#output").append(output);
}

$(document).ready(function() {
  $("#inform").submit(function(e) {
    e.preventDefault(); //Prevent page reload
    var input = $("#inbox").val(); //Retrieve entered text
    $("#inbox").val(""); //Assuming clearing is required
    printSomething(input);
  });
});

function printSomething(input) //Accuracy of function purpose...
  {
    var output = $("#directory").html() + input + "<br />";

    //Customization needed here for specific processing
    if (input.length > 0) {
      output += "You typed: " + input;
    } else {
      output += "No input provided!"
    }
    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>

Answer 2

Your Second Query

In order to align the input field next to the directory, I enclosed them both within a <table>:

CSS Styles

.intable {
  width: 100%;
}

HTML Structure

<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>

(Explanation about the <form> will follow shortly)

Your Initial Inquiry

Fetching User Input

The rationale behind enclosing everything in a form was for easier retrieval of user input:

$(document).ready(function() {
  $("#inform").submit(function(e) { //Listen for user input
    e.preventDefault();             //Prevent page reload
    var input = $("#inbox").val();  //Retrieve entered text
    $("#inbox").val("");            //Assuming you want to clear this after use
    printSomething(input);          //Process and output input
  });
});

Displaying Output

I included the

<span id="output" class="dir"></span>

as a placeholder for displaying the output.

function printSomething(input)
{
  //Combine directory text with user's input for output
  var output = $("#directory").html() + input + "<br />";

  //Customize this section according to your processing needs
  if(input.length > 0)
  {
    output += "You typed: " + input;
  } else {
    output += "No input provided!"
  }
  //Add line break to move directory to new line, since span doesn't do it automatically
  output += "<br />";

  //Append the new content to the output display area
  $("#output").append(output);
}

$(document).ready(function() {
  $("#inform").submit(function(e) {
    e.preventDefault(); //Prevent page reload
    var input = $("#inbox").val(); //Retrieve entered text
    $("#inbox").val(""); //Assuming clearing is required
    printSomething(input);
  });
});

function printSomething(input) //Accuracy of function purpose...
  {
    var output = $("#directory").html() + input + "<br />";

    //Customization needed here for specific processing
    if (input.length > 0) {
      output += "You typed: " + input;
    } else {
      output += "No input provided!"
    }
    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>

Is there a way to create submit buttons that trigger printing in HTML? Additionally, how can I design a text input that spans 100% width on the same line as a <span>, <p>, or <div>?

Answer №1

Similar questions

How can I substitute a specific portion of a string with values that correspond to items in an object array?

Obtaining and Assigning Filter Values in Material Table

Using Node.js to integrate Stripe payment method

What happens to the XMLHttpRequest when the browser is closed?

What is the process for configuring simultaneous services on CircleCI for testing purposes?

Displaying Data in Table Using Ajax Request

Learn the process of including an active class using jQuery from an external active.js file!

Discover the method for converting a local file into a string

Converting an HTML table to a CSV file with pure JavaScript

Implementing service injection within filters in NestJS

Using Rails to render partials with Ajax and buttons

My CSS disappears when using an ASP.Net MVC form

The shadow is obscured by a block that has an 'overflow: scroll' property

Dynamic JSX tag including attributes

Function utilizing variables parsed by Angular directive

Are there any AJAX tools or packages in Node.js Express for connecting (posting/getting) with other servers and retrieving data?

What could be causing DataTable to insert a row at the beginning of my table?

establishConnection(); ^ TypeError: establishConnection is undefined

vue implementing autoscroll for long lists

Execute JavaScript AJAX Request On Page Load