Develop Reference

How to dynamically change color of clicked elements using color-picker

I wanted to change color according to user preference dynamically like when a user selects a color then it is applied synchronously to the element .
Like when an element is clicked color picker opens and then it works like developer tools color-picker , when a color is chosen from the picker it is applied to element and if user wants to change the color again in same picker than that also applied
Tried to went through following questions but couldn't find answer :
Change background colors dynamically using input event
how to dynamically select a color from a color picker by using jQuery?
HTML Input Color Picker, Apply Changes In Sync With Color Picker Selection
I wanted to code work like this in below snippet, whichever element is clicked than colors are changes of that element.
In original code html is like this :
<div id="clockOuterCircle"><div id="clockStyleCircle"></div></div> which can be solved by bubbling/capturing
var reed = document.getElementById("clockOuterCircle");
var reed1 = document.getElementById("clockStyleCircle");
reed.addEventListener('click', deed)
reed1.addEventListener('click', deed)
function deed() {
var reed2 = document.getElementById("colorClock");
reed2.click();
var reed3 = reed2.value;
// reed1.addEventListener('change', function() {
this.style.backgroundColor = reed3;
document.getElementById("demo").innerHTML = reed3;
//})
}
#clockStyleCircle {
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 28.5%;
left: 28.5%;
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
}
#clockOuterCircle {
display: flex;
justify-content: center;
align-items: center;
width: 42vw;
height: 42vw;
margin: auto;
border-radius: 50%;
border: 4px solid rgb(255, 62, 62);
background-color: rgb(253, 133, 133);
user-select: none;
}
<div id="clockStyleCircle"></div>
<div id="clockOuterCircle"></div>
<div id="demo"></div>
<input type="color" name="colorClock" id="colorClock">
Possible answer of dynamically changing color can be like this in below snippet, like using
input event separately on each element.
var reed = document.getElementById("clockOuterCircle");
var reed1 = document.getElementById("clockStyleCircle");
reed.addEventListener('click', deed)
reed1.addEventListener('click', deed)
//function deed() {
// var reed2 = document.getElementById("colorClock");
// reed2.click();
// var reed3 = reed2.value;
// reed1.addEventListener('change', function() {
// this.style.backgroundColor = reed3;
// document.getElementById("demo").innerHTML = reed3;
//})
//}
reed2 = document.getElementById("colorClock");
reed2.addEventListener('input', deed)
function deed() {
var reed3 = reed2.value;
reed.style.backgroundColor = reed3;
}
reed4 = document.getElementById("colorClock2");
reed4.addEventListener('input', deed1)
function deed1() {
var reed5 = reed4.value;
reed1.style.backgroundColor = reed5;
}
#clockStyleCircle {
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 28.5%;
left: 28.5%;
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
}
#clockOuterCircle {
display: flex;
justify-content: center;
align-items: center;
width: 42vw;
height: 42vw;
margin: auto;
border-radius: 50%;
border: 4px solid rgb(255, 62, 62);
background-color: rgb(253, 133, 133);
user-select: none;
}
<div id="clockStyleCircle"></div>
<div id="clockOuterCircle"></div>
<div id="demo"></div>
<input type="color" name="colorClock" id="colorClock">
<input type="color" name="colorClock" id="colorClock2">
But in above method color is not changing of clicked element instead a fixed element color is changed which is defined beforehand . So have to apply code to different elements separately, as there are many elements so wanted to apply both ways
Thanks for the help in advance.

Updated to stop bubbling with event.stopPropagation()
If I've understood you correctly, you want to launch a colour picker every time any particular element in your page is clicked which allows you to change that element's background colour.
This solution adds and then launches a colour picker when any element with the class circle is clicked, then removes it again after a colour has been selected.
The colour picker input is hidden with display:none but the dialog box is visible.
let body = document.body;
let circles = document.querySelectorAll('.circle');
circles.forEach((circle) => {
circle.addEventListener('click', () => {
let existingColourPickers = document.querySelectorAll('input.colour-picker')
existingColourPickers.forEach((existingColourPicker) => {
if (body.contains(existingColourPicker)) {
body.removeChild(existingColourPicker);
}
});
event.stopPropagation();
let colourPicker = document.createElement("input");
colourPicker.type = "color";
colourPicker.className = "colour-picker";
body.appendChild(colourPicker);
colourPicker.click();
colourPicker.addEventListener("input", () => {
circle.style.backgroundColor = event.target.value;
}, false);
colourPicker.addEventListener("change", () => {
body.removeChild(colourPicker);
}, false);
});
});
#clockStyleCircle {
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 28.5%;
left: 28.5%;
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
z-index:1;
}
#clockOuterCircle {
display: flex;
justify-content: center;
align-items: center;
width: 42vw;
height: 42vw;
margin: auto;
border-radius: 50%;
border: 4px solid rgb(255, 62, 62);
background-color: rgb(253, 133, 133);
user-select: none;
}
#another-circle {
width:50px;
height:50px;
border-radius: 50%;
border: 4px green solid;
background-color:blue;
position:absolute;
top:20px;
left:20px;
}
.colour-picker {
display:none;
}
<body>
<div id="clockOuterCircle" class="circle">
<div id="clockStyleCircle" class="circle"></div>
</div>
<!-- another circle -->
<div id="another-circle" class="circle"></div>
<!-- ... -->
</body>

What you had was pretty close. I just separated the color picking code into a new function. Try this..
var reed = document.getElementById("clockOuterCircle");
var reed1 = document.getElementById("clockStyleCircle");
reed.addEventListener('click', deed)
reed1.addEventListener('click', deed)
async function deed() {
var color = await getUserColor();
this.style.backgroundColor = color;
document.getElementById("demo").innerHTML = color;
}
function getUserColor() {
return new Promise(done => {
var color_picker = document.createElement('input');
color_picker.setAttribute('type', 'color');
color_picker.style.opacity = 0;
document.body.appendChild(color_picker);
color_picker.addEventListener('change', function() {
var color = this.value;
this.remove();
done(color);
});
color_picker.click();
});
}
#clockStyleCircle {
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 28.5%;
left: 28.5%;
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
}
#clockOuterCircle {
display: flex;
justify-content: center;
align-items: center;
width: 42vw;
height: 42vw;
margin: auto;
border-radius: 50%;
border: 4px solid rgb(255, 62, 62);
background-color: rgb(253, 133, 133);
user-select: none;
}
<div id="clockStyleCircle"></div>
<div id="clockOuterCircle"></div>
<div id="demo"></div>

Your example defines the background-color using two different methods class and style, which may produce unexpected results.
Here is an example using the most basic form of JavaScript, that does not set the background-color via class.
When you click an area, it will change to the selected color and when you select a color, the last area clicked, will change to the same color.
To keep it brief and simple, the example does not check, if the elements it operates on, are well defined.
// The last area clicked
var div_last_clicked = 0;
// Called when the document has finished loading
function myonload() {
// Detect when an area is clicked
let elems = document.querySelectorAll('.mydiv');
for(let i = 0; i < elems.length; ++i) {
let elem = elems[i];
elem.addEventListener('click', mydiv_clicked);
}
// Detect when the color changes
let ob = document.querySelector('.mycolor');
ob.addEventListener('change', mycolor_changed);
}
// Called when an area is clicked
function mydiv_clicked(e) {
let ob = document.querySelector('.mycolor');
div_last_clicked = e.target;
div_last_clicked.style = "background-color:" + ob.value;
}
// Called when the color changes
function mycolor_changed(e) {
if(div_last_clicked)
div_last_clicked.style = "background-color:" + e.target.value;
}
.mydiv {
height:30px;
width: 200px;
border:1px solid black;
margin-bottom:2px;
}
<body onload="myonload()">
<input class="mycolor" type="color" value="#ff0000" />
<p>When you click an area below, it will change to the selected color.</p>
<p>When you change the color, the last area clicked will also change
to the same color.</p>
<div class="mydiv">First area</div>
<div class="mydiv">Second area</div>
<div class="mydiv">Third area</div>
</body>

Based on your additional info, if you want to have a single colour input on the page, you can add a data-id attribute to each of your circles, and use that as a reference for which element the colour input should update when changed:
var restyleBG = document.querySelectorAll(".restyleBackground")
var colorPicker = document.getElementById("colorClock");
var selected;
restyleBG.forEach((restyle) => {
restyle.addEventListener('click', changeBGcolor, false)
})
function changeBGcolor(event) {
event.stopPropagation()
selected = document.querySelector(`[data-id="${event.srcElement.dataset.id}"]`);
colorPicker.click();
}
colorPicker.addEventListener('input', (event) => {
selected.style.backgroundColor = colorPicker.value;
})
#clockStyleCircle {
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 28.5%;
left: 28.5%;
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
z-index: 1;
}
#clockOuterCircle {
display: flex;
justify-content: center;
align-items: center;
width: 42vw;
height: 42vw;
margin: auto;
border-radius: 50%;
border: 4px solid rgb(255, 62, 62);
background-color: rgb(253, 133, 133);
user-select: none;
}
#another-circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 4px green solid;
background-color: blue;
position: absolute;
top: 20px;
left: 20px;
}
#colorClock {
display: none;
}
<body>
<input type="color" name="colorClock" id="colorClock">
<div id="clockOuterCircle" class="restyleBackground" data-id="1">
<div id="clockStyleCircle" class="restyleBackground" data-id="2"></div>
</div>
<!-- another circle -->
<div id="another-circle" class="restyleBackground" data-id="3"></div>
<!-- ... -->
</body>

How do I add an X tag in a search bar

I am trying to code a website that has a search bar. Currently, I am polishing it up and adding some features to the site. One feature I want to add is an X every time someone types something into the search box and I want it to clear the text in the input. Technically I have achieved this but it does not feel so nice. I want it to act as the X at reverb.com.
Here is my version:
function deleteButton() {
var deletebtn = document.getElementById("deletebtn");
var input = document.getElementById("inputbar");
if (input.value.length >= 1) {
deletebtn.style.visibility = "visible";
deletebtn.style.cursor = "pointer";
}
}
function clearSearch() {
var input = document.getElementById("inputbar");
var deletebtn = document.getElementById("deletebtn");
deletebtn.style.visibility = "hidden";
input.value = "";
}
.exitbtn {
margin-top: 39px;
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.5);
border-left: none !important;
border-right: 1px solid rgba(0, 0, 0, 0.5) !important;
color: rgba(0, 0, 0, 0.5);
font-size: 16px;
background: none;
outline: none;
transition: 0.3s;
}
.exitbtn img {
visibility: hidden;
}
.exitbtn img:hover {
transition: 0.3s;
opacity: 1;
content: url("images/orange-delete-sign.png");
}
.delete-sign {
height: 31px;
opacity: 0.7;
display: inline-block;
}
<input type="text" name="search" value="" onkeyup="enterSearch(); deleteButton();" autocomplete="off" id="inputbar" class="searchbar" autocorrect="off" autocapitalize="off" tabindex="0">
<button onclick="clearSearch()" class="exitbtn extspacer"><img id="deletebtn" class="delete-sign" src="images/grey-delete-sign.png"></button>
I am showing my code just in case you are wanting it.
Here are some images of it working:
If you are wondering why I don't like this method, it is because when you hover over the button,
it is still there and the Reverb version completely disappears and acts like a normal text box.

Try input type="search". It is an inbuilt input type in HTML which creates a cross as soon as a character is entered in the input field.
Here's an example for the ease of understanding:
input { /* You could use a class name/id as well */
border-radius: 5px;
}
.Search-icon {
border-style: outset;
}
<input type="search" class="search" placeholder="some text"><span class="Search-icon">search</span>

If you want an 'X' you can use
×
(I would have commented this but I do not have enough SO reputation to comment)

You can easily do it with jQuery!
To form the jQuery code in a sentence:
If Input not empty = show "X".
If click on "X" input value = empty
$(".clearable").each(function() {
const $inp = $(this).find("input:text"),
$cle = $(this).find(".clearable__clear");
$inp.on("input", function(){
$cle.toggle(!!this.value);
});
$cle.on("touchstart click", function(e) {
e.preventDefault();
$inp.val("").trigger("input");
});
});
.clearable{
position: relative;
display: inline-block;
}
.clearable input[type=text]{
padding-right: 1em;
box-sizing: border-box;
}
.clearable__clear{
display: none;
position: absolute;
right:0; top:0;
padding: 0 8px;
font-style: normal;
user-select: none;
cursor: pointer;
}
.clearable input::-ms-clear { /* Remove IE default X */
display: none;
}
/*
Font Size
*/
input {
font-size: 30px;
}
.clearable__clear {
font-size: 40px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<span class="clearable">
<input type="text" placeholder="Search...">
<i class="clearable__clear">×</i>
</span>

JavaScript and CSS not working as intended

In the following code, when I put the div with class thumb-bar, the JavaScript I have written works but if place use it after full-img div tag, it doesn't work also the CSS attribute cursor: pointer for the thumb-bar div is not applied.
Edit - I mean the click listeners I apply using JavaScript are not working
CSS:
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
button {
border: 0;
background: rgba(150, 150, 150, 0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
HTML:
<div class="thumb-bar"></div>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<button class="dark">Darken</button>
</div>
JavaScript:
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
for (var i = 1; i <= 5; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.addEventListener('click', function(e) {
displayedImage.setAttribute('src', e.target.getAttribute('src'))
});
}

Because you're floating .thumb-bar img, those images are taken out of the page flow which results in the .thumb-bar element to have a height of 0, which in turn causes subsequent content to not be pushed down. That means that the .full-img element is rendered on top of the images and obscures them from the mouse pointer.
You need to clear the floats in order to get the .full-img element to render below them. This can be done by either making sure the .thumb-bar clear it's own content:
.thumb-bar {
overflow: hidden;
}
... or make the .full-img element itself clear them:
.full-img {
clear: both;
}

Style input range background before thumb

I want to style the bar before the thumb with a different color on a range input. I'v tried looking for a solution but I havent found a proper solution. This is what I need it to look like:
Chrome doesnt seem to support input[type='range']::-webkit-slider-thumb:before anymore and I am at a loss how to style it. Here's what I have so far:
input[type='range'] {
min-width: 100px;
max-width: 200px;
&::-webkit-slider-thumb {
-webkit-appearance: none !important;
background-color: #white;
border: 1px solid #gray-4;
height: 14px;
width: 14px;
&:hover,
&:focus,
&:active {
border-color: #blue;
background-color: #gray-2;
}
}
&::-webkit-slider-runnable-track {
background-color: #gray-2;
border: 1px solid #gray-4;
}
}

document.querySelectorAll(".__range").forEach(function(el) {
el.oninput =function(){
var valPercent = (el.valueAsNumber - parseInt(el.min)) /
(parseInt(el.max) - parseInt(el.min));
var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+ valPercent+', #29907f), color-stop('+ valPercent+', #f5f6f8));';
el.style = style;
};
el.oninput();
});
.__range{
margin:30px 0 20px 0;
-webkit-appearance: none;
background-color: #f5f6f8;
height: 3px;
width: 100%;
margin: 10px auto;
}
.__range:focus{
outline:none;
}
.__range::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #29907f;
border-radius: 50%;
cursor: -moz-grab;
cursor: -webkit-grab;
}
<input class="__range" id="rng" name="rng" value="30" type="range" max="100" min="1" value="100" step="1">

The trick in the post referenced by shambalambala is clever, but I don't think it will work in this case if you want to get something that looks exactly like the image you show. The approach there is to put a shadow on the thumb to create the different coloring to the left of the thumb. Since the shadow extends in the vertical, as well as the horizontal, direction, you also have to add overflow:hidden to the range or the track in order to clip the shadow. Unfortunately, this also clips the thumb. So if you want a thumb that extends beyond the track in the vertical dimension, such as in the image you show where the thumb is a circle with a diameter larger than the track width, this won't work.
I'm not sure there's a pure CSS solution to this problem. With JavaScript, one way around this is to make two range elements that overlap exactly. For one range element, you will see only the thumb and for one you will see only the track. You can use the shadow approach on the track element to get the different color before the thumb. You can style the thumb on the thumb range however you want, and since overflow is not set to hidden for this range element, it can extend beyond the width of the track. You can then use JavaScript to yoke the two range elements together, so that when you move the thumb on the thumb-visible element, the value of the track-visible element also changes.
For example (works in webkit browsers--will need some additional styling for other browsers):
<html>
<head>
<style>
.styled_range {
position: relative;
padding: 10px;
}
input[type=range] {
-webkit-appearance: none;
width: 600px;
background: transparent;
position: absolute;
top: 0;
left: 0;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 12px;
}
.track_range {
pointer-events: none;
}
.track_range::-webkit-slider-runnable-track {
background: #D0D0D0;
border-radius: 6px;
overflow: hidden;
}
.track_range::-webkit-slider-thumb {
-webkit-appearance: none;
background: transparent;
height: 1px;
width: 1px;
box-shadow: -600px 0 0 600px #666666;
}
.thumb_range::-webkit-slider-runnable-track {
background: transparent;
cursor: pointer;
}
.thumb_range::-webkit-slider-thumb {
-webkit-appearance: none;
border: 3px solid #ffffff;
border-radius: 20px;
height: 40px;
width: 40px;
background: #1180AD;
cursor: pointer;
margin: -12px 0px 0px 0px;
}
</style>
</head>
<body>
<form>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
<br/>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
</form>
</body>
<script>
window.onload = function() {
var styledRanges = document.getElementsByClassName('styled_range');
for (var i=0; i<styledRanges.length; i++) {
var thumbRange = null, trackRange = null;
for (var j=0; j<styledRanges[i].children.length; j++) {
var child = styledRanges[i].children[j];
if (child.className === 'thumb_range')
var thumbRange = child;
else if (child.className === 'track_range')
var trackRange = child;
}
thumbRange.oninput = function(thumbRange, trackRange) {
return function(e) {
trackRange.value = thumbRange.value;
};
}(thumbRange, trackRange);
}
}
</script>
</html>

HTML/CSS/Javascript Command Line-Like Interface

I would like to create a command-line interface but I am stumped on finding the right ray to get input. I need to not allow multi-line commands but wrap the text to a newline when it reaches the end of a page. Right now I have a textarea set up to only be one line and use word-wrap and stuff, and whenever the user presses enter it sets the value of the textarea to nothing and adds the old value of the textarea to a paragraph
So basically:
What i want
User can enter as much text as they want
User can not enter multi-line text
Once user presses enter, the text gets added to a paragraph and textarea is cleared
My problem
When user presses enter the textarea gets set to no text but then
adds a newline(which i do not want)
When text is added to paragraph there is a space and newline(???) being added(maybe related to how textarea adds newline)
Maybe there is another way to do this that is better or can I just fix what I have already done?
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "brdstyle.css" />
<title>BrD</title>
</head>
<script src = "brdapp.js"></script>
<body>
<div id = "background">
<div id = "console">
<p id = "consoletext">
Ispum dolor ugin hegar<br/>
dank daniel for life
</p>
<textarea rows = "1" id = "textinput" onkeydown = "checkInput();"></textarea>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
body {
background-color: rgb(0, 0, 0);
}
#background {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
background-color: black;
margin: 0px;
padding: 0px;
}
#console {
margin: 0px;
padding: 0px;
}
#consoletext {
color: rgb(255, 255, 255);
font-family: Monospace;
margin: 10px 0px 0px 10px;
}
#textinput {
resize: none;
margin: 0px 0px 10px 10px;
border: none;
outline: none;
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
font-family: Monospace;
width: calc(100% - 20px);
overflow: hidden;
}
Javascript
function checkInput () {
var event = window.event || event.which;
if (event.keyCode == 13) {
addLine(document.getElementById("textinput").value);
document.getElementById("textinput").value = "";
}
document.getElementById("textinput").style.height = (document.getElementById("textinput").scrollHeight) + "px";
}
function addLine (line) {
var textNode = document.createTextNode(line);
document.getElementById("consoletext").appendChild(textNode);
}
If you answer this question, thank you for your help! :)

Alright, as you had multiple problems, I will break this into 2 parts:
1. Newline being added after text field is cleared. You can stop this by calling event.preventDefault() under where it recognizes the "enter" key being pressed.
function checkInput() {
var event = window.event || event.which;
if (event.keyCode == 13) {
event.preventDefault();
addLine(document.getElementById("textinput").value);
document.getElementById("textinput").value = "";
}
document.getElementById("textinput").style.height = (document.getElementById("textinput").scrollHeight) + "px";
}
function addLine(line) {
var textNode = document.createTextNode(line);
document.getElementById("consoletext").appendChild(textNode);
}
2. I was not able to replicate your newline/space error, however it may have something to do with the event not cancelling like above.
Here is the code snippet to try yourself:
function checkInput() {
var event = window.event || event.which;
if (event.keyCode == 13) {
event.preventDefault();
addLine(document.getElementById("textinput").value);
document.getElementById("textinput").value = "";
}
document.getElementById("textinput").style.height = (document.getElementById("textinput").scrollHeight) + "px";
}
function addLine(line) {
var textNode = document.createTextNode(line);
document.getElementById("consoletext").appendChild(textNode);
}
* {
margin: 0px;
padding: 0px;
}
body {
background-color: rgb(0, 0, 0);
}
#background {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
background-color: black;
margin: 0px;
padding: 0px;
}
#console {
margin: 0px;
padding: 0px;
}
#consoletext {
color: rgb(255, 255, 255);
font-family: Monospace;
margin: 10px 0px 0px 10px;
}
#textinput {
resize: none;
margin: 0px 0px 10px 10px;
border: none;
outline: none;
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
font-family: Monospace;
width: calc(100% - 20px);
overflow: hidden;
}
<div id = "background">
<div id = "console">
<p id = "consoletext">
Ispum dolor ugin hegar<br/>
dank daniel for life
</p>
<textarea rows = "1" id = "textinput" onkeydown = "checkInput();"></textarea>
</div>
</div>

You should change the textarea element to a text input
<input type="text" id="textinput" onkeydown="checkInput();">
This should get rid of the weird newline and spaces. You should also note that there is automatically a space at the end of your original paragraph due to you adding a newline after "dank daniel for life" :).
P.S I'm still a little confused as to why you don't want the text appended on a new line because it's a terminal but good luck with whatever your doing
Hope this helps!

To prevent the newline from being added you need to call event.preventDefault() just after resetting the textarea.