CODEWITHSUNDEEP
javascripthtml
m.said
m.said

Reputation: 104

Is there a way to get text input in Javascript/Html without a text box?

I am trying to make a custom terminal as a website with custom commands but I am struggling to get text input without using a text box. I tried this:

<input type='text' id='textInput'>

but it creates a text box. I also tried using an event listener as such:

document.addEventListener('keyup', (event)=>{
        if(event.keyCode == 65 ) {
            msg += 'a';
        }
});

but it does not work as it gives an error: ReferenceError: document is not defined

and even if it did it would be slow to do that for every key.

Upvotes: 1

Views: 1128

Answers (4)

JRCharney
JRCharney

Reputation: 79

A few syntax fixes which might help:

  1. Use window instead of document for the addEventListener. document probably should be use if you are calling for something to happen to one specific item. (e.g. document.querySelector('#searchbox').)
  2. Using keydown might be more effective than keyup for keyboard commands.
  3. Use strict equality (===) instead of classic equality (==).
  4. keyCode is deprecated. Use key instead. It will also be easier to code. (Note: if you need to use capital A, consider using event.key === 'A' && event.shiftKey.)
window.addEventListener('keydown', (event) => {
        if(event.key === 'A' ) {
            msg += 'a';
        }
});

Upvotes: 1

DeeStarks
DeeStarks

Reputation: 329

let txt = document.getElementById('textInput')
txt.addEventListener('keyup', (event) => {
        if(event.keyCode == 65 ) {
            msg += 'a';
        }
});

And if you don't like the feel/look of your text input with the box, you can always edit it yourself with CSS

You can do something like this:

<style>
    #bg{
        background-color: black;
        padding: 10px;
    }
    #textInput{
        color: green; #Change to a color you like
        border: None;
        outline: None;
        line-height: 25px;
        font-family: monospace; #You can also change
        background-color: transparent;
        width: 100%;
</style>

<div id='bg'>
    <input type='text' id='textInput' >
</div>

Upvotes: 2

Deepak
Deepak

Reputation: 2742

You don't want the outline of a textbox? If so, try setting its value to 0px:

<input type="text" style="border: 0px none;" />

Also give a try to get input directly from prompt box:

<button onclick="promptValue()">Try it</button>

<p id="enteredValue"></p>

<script>
function promptValue() {
  var textValue = prompt("Please enter a value");
  document.getElementById("enteredValue").innerHTML = textValue;
}
</script>

Upvotes: 2

c00kie
c00kie

Reputation: 306

If you want to input data but do not want to display the textbox, then I suggest setting the CSS on the textbox to opacity: 0; - example:

<input style="opacity: 0;" id="textInput" />

<script>
document.getElementById('textInput').focus(); // focus on the element
document.getElementById('textInput').addEventListener('keyup', (event) => {
        if(event.keyCode == 65 ) {
            msg += 'a';
        }
});
</script>

EDIT: Updated answer to use opacity instead of display in CSS

Upvotes: 2

Related Questions