Message block which provides a basic "sms-message" functionality via HTML.
- If message length < 1, a button will be disabled.
- Displaying a message status (length/maxLength).
- Dynamic message status changing.
See jsfiddle
Created
May 20, 2016 19:35
-
-
Save asduser/ad44a0e40fbc510d79819c9143e16be3 to your computer and use it in GitHub Desktop.
Simple sms-form (html + jquery)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title> SMS message-box via HTML </title> | |
| <style> | |
| #message-box { width:150px; } | |
| #message-box textarea { width:100%; } | |
| #message-box #message-status { float:left; width:30px; margin:3px 0 0 0; } | |
| #message-box #message-button:hover { cursor:pointer; } | |
| #message-box #message-button { float:right; width:50px; background: green; color:white; } | |
| #message-box #message-button:disabled { background:grey; } | |
| </style> | |
| </head> | |
| <div id="message-box"> | |
| <textarea id="message-area"></textarea> | |
| <div id="message-status"></div> | |
| <input type="button" id="message-button" value="send" /> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> | |
| <script> | |
| // declare variables | |
| var input = $("#message-area"), result = $("#message-status"), button = $("#message-button"), max = 10, success = "green", fail = "red"; | |
| // initialize | |
| updateResult(null, success); | |
| setMaxLength(max); | |
| // subscribe on input changes | |
| input.bind('input propertychange', function() { | |
| var value = $(this).val(), len = value.length; | |
| updateResult(len); | |
| }); | |
| // subscribe on submit button changes | |
| button.on("click", buttonClick); | |
| /*** INTERNAL METHODS ***/ | |
| // set a maximum length | |
| function setMaxLength(len){ | |
| input.attr("maxlength", len); | |
| } | |
| // update UI status | |
| function updateResult(val){ | |
| button.prop('disabled', !val);; | |
| result.html( getStatus(val || 0, val < max ? success : fail) ); | |
| } | |
| // get status (length/max) for the current message | |
| function getStatus(val, c){ | |
| result.css("color", c); | |
| return [val, "/", max].join(""); | |
| } | |
| // send message handler | |
| function buttonClick(){ | |
| alert("Your message is: " + input.val()); | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment