submit with shift + enter

src/components/newMessage.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="newMessageBanner">
+    <form v-on:submit.prevent="sendMessage()">
       <label for="newMessageInput"></label>
-    <textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
+      <textarea v-on:keyup.shift.enter="sendMessage()" v-on:input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
                 autocomplete="off" placeholder="type a message ..." v-model="msg.content.text" />
-    <icon @click.native="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;"
+      <icon @click.native="sendMessage()" title="press shift + enter to submit" id="sendMessageBtn"
             ic="./sym/ic_send_white_24px.svg" />
+    </form>
   </div>
 </template>
 
@@ -55,7 +57,7 @@ export default {
 </script>
 
 <style scoped>
-  .newMessageBanner{
+.newMessageBanner{
   position: absolute;
   bottom: 0;
   left: 0;
@@ -64,8 +66,8 @@ export default {
   min-height: 4rem;
   background-color: #1d1d1d;
   border-radius: 1rem 1rem 0 0;
-  }
+}
-  .newMessageInput{
+.newMessageInput{
   position: relative;
   margin-top: 1.5rem;
   margin-bottom: 1rem;
@@ -81,6 +83,21 @@ export default {
   resize: none;
   vertical-align: middle;
   font-family: Avenir, Helvetica, Arial, sans-serif;
-  }
+}
-
+#sendMessageBtn{
+  position: absolute;
+  right: 1rem;
+  bottom: 0.5rem;
+}
+#sendMessageBtn:hover::after{
+  content: "press shift + enter to submit";
+  position: absolute;
+  padding: 1rem;
+  bottom: 4rem;
+  right: 0;
+  width: 14rem;
+  background-color: #eee;
+  color: #000;
+  border-radius: 1rem;
+}
 </style>