ID:2020126
 
(See the best response by Lummox JR.)
Code:
<byondclass name="chatbox">

<style>
#chatbox {
width: 200px;
height: 150px;

position: absolute;
top: calc(100% - 150px);
margin: 0px 0px 50px 50px;

background: rgba(0,0,0,0);

z-index: 1;
}

#content {
width: 100%;
}

input[type="text"] {
width: 100%;
height: 25px;

margin: auto;
border: 1px solid grey;
color: rgb(61, 132, 252);
background-color: rgb(0, 52, 141);
}

.chat-strip {
width: 100%;

}
</style>

<script>
(function() {
var stripColors = ['rgba(20, 107, 255, 0.5)', 'rgba(0, 68, 184, 0.5)'];
var curStrip = 0;

return {
fn: {
output: function(obj) {
if(obj.hasOwnProperty('text')) {
this.ui.content.innerHTML += '<div class="chat-strip" style="background-color:' + stripColors[curStrip] + ';">' + obj.text + '</div>';
if(curStrip < stripColors.length - 1) {
curStrip++;
} else {
curStrip = 0;
}
}
}
}
};
})()
</script>

<div id="content"></div>
<input id="chat-input" type="text" placeholder="Press enter to chat..." onsubmit="javascript:output(this);return false;" />

</byondclass>


Problem description:
I'm probably far off from the proper way of doing this. However, I'd like to call output() when the user presses enter in input.

I pass this since output grabs the text attribute from the object. I return false to prevent it from going to another page on submission. I don't know if this will happen yet since I haven't gotten to testing onsubmit anyways.
Best response
Onsubmit is a form attribute, not an input attribute. Give your control a create() member that adds an event listener for keydown, and that should do it.
Can you provide an example script? I've been reading through this and I haven't been able to find any way to add a listener. I've only come across keyEvent() and dispatchKeyEvent(). And some of the macro methods.

I'm just hoping that it's not going to be something where I'm going to have to go back to .dm just to add it with dispatchKeyEvent(). That'd result in a lot of back and forth.

My attempt (after trying many methods in .dms only):
<script>
(function() {
var stripColors = ['rgba(20, 107, 255, 0.5)', 'rgba(0, 68, 184, 0.5)'];
var curStrip = 0;

return {
fn: {
output: function(obj) {
if(obj.hasOwnProperty('text')) {
this.ui.content.innerHTML += '<div class="chat-strip" style="background-color:' + stripColors[curStrip] + ';">' + obj.text + '</div>';
if(curStrip < stripColors.length - 1) {
curStrip++;
} else {
curStrip = 0;
}
}
},
create: function() {
console.log(1);
dispatchKeyEvent("Enter",this.ui.chatInput); // <-- While this is my attempt, I've come to the conclusion already that this can't be done inside here.
console.log(2);
},
keyEvent: function(event) {
console.log(3);
return true;
}
}
};
})()
</script>
In response to Xirre
I'll take a shot at it.

<byondclass name="chatbox">

<style>
.byond_chatbox {
width: 200px;
height: 150px;

position: absolute;
top: calc(100% - 150px);
margin: 0px 0px 50px 50px;

background: rgba(0,0,0,0);

z-index: 1;
}

.chatbox_content {
width: 100%;
}

.chatbox_input {
width: 100%;
height: 25px;

margin: auto;
border: 1px solid grey;
color: rgb(61, 132, 252);
background-color: rgb(0, 52, 141);
}

.chat_strip {
width: 100%;
}
</style>

<script>
(function() {
var stripColors = ['rgba(20, 107, 255, 0.5)', 'rgba(0, 68, 184, 0.5)'];
var curStrip = 0;

return {
fn: {
create: function() {
this.ui.input.addEventListener(this.keydown.bind(this));
},
output: function(obj) {
if(obj.hasOwnProperty('text')) {
this.ui.content.innerHTML += '<div class="chat_strip" style="background-color:' + stripColors[curStrip] + ';">' + obj.text + '</div>';
if(curStrip < stripColors.length - 1) {
curStrip++;
} else {
curStrip = 0;
}
}
},
keydown: function(e) {
if(e.keyCode==10 || e.keyCode==13) {
var t=this, i=t.ui.input, text=i.value;
i.value = '';
t.input('chat "'+text.replace(/[\\\"]/g, '\\$1')+'"');
}
}
}
};
})()
</script>

<div id="content" class="chatbox_content"></div>
<input id="input" class="chatbox_input" type="text" placeholder="Press enter to chat..." />

</byondclass>

I'm assuming in that code that your goal is to actually send a command to the server; when you called output() directly it wouldn't have had any impact on the server. In this code, the keydown routine sends a command.

BTW, I think the output() function could use some streamlining for better performance. Here's a quick rewrite of the inner portion:

// this is a quicker way to add text for performance
var/d = document.createElement(div);
document.createDocumentFragment().appendChild(d);
d.className="chat_strip";
byond.css(d, {backgroundColor: stripColors[curStrip]});
// strip off the ending br tag
d.innerHTML = obj.text.replace(/\n*<br\/?>\n*$/, '');
this.ui.content.appendChild(d);
if(++curStrip >= stripColors.length) curStrip = 0;