Note: XUI is developed for WebKit (hence it’s light weight) since that is the mobile browser of choice for most devices. If something doesn’t seem to work, try using Chrome or Safari since they too use Webkit.
Here is some code for a JavaScript, CSS, Twitter style status text area that i plan on using on a PhoneGap project i am working on. It makes use of the XUI Javascript framework, which i use throughout the project. XUI, compared to other Javascript frameworks is super light, and is developed by the the people behind PhoneGap
You could find the XUI framework at http://xuijs.com/
The code supports:
- 140 character count down
- Visual styling cue when you go over 140 characters
- prompting text when textarea is empty
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <head> <script type="text/javascript" src="includes/js/xui.js"></script> <script type="text/javascript" src="includes/js/messageBox.js"></script> <link rel="stylesheet" href="includes/css/messageBox.css" type="text/css" media="screen" title="no title" charset="utf-8" /> </head> <body> <div class="promptTextField"> <form name="myForm"> <textarea id="messageAreaTxt" onKeyDown="checkCharCount(this.value)" onBlur="checkCharCount(this.value);handleMessageBlur(this.value);" onFocus="handleMessageFocus(event);" ></textarea> </form> <div id="textPromptText" onClick="document.myForm.messageAreaTxt.focus();" class="textPromptText active">Type in your message...</div> <div id="charCount">140</div> </div> </body> </html> |
CSS Styling
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | div.promptTextField{ position:relative; height:100px; width:300px; } #messageAreaTxt{ position:absolute; resize: none; top:0px; left:0px; height:100px; width:300px; } #charCount{ position:absolute; top:78px; right:5px; } #textPromptText{ -khtml-user-select: none; font-style: italic; color:#999999; position:absolute; top:5px; left:5px; } #textPromptText.inactive{ display:none; } #textPromptText.active{ display:block; } |
JavaScript Coding
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | var MAX_CHARACTER_LENGTH=140; function checkCharCount(str){ console.log(str.length + " characters typed") var count = MAX_CHARACTER_LENGTH - str.length x$('#charCount').html('inner', count.toString()); if((str.length-1) < (MAX_CHARACTER_LENGTH)){ x$('#messageAreaTxt').setStyle('color', '#000000'); x$('#messageAreaTxt').setStyle('background', '#FFFFFF'); x$('#charCount').setStyle('color', '#000000'); }else{ x$('#messageAreaTxt').setStyle('color', '#FFFFFF'); x$('#messageAreaTxt').setStyle('background', '#FF0000'); x$('#charCount').setStyle('color', '#FFFFFF'); } } function handleMessageFocus(event){ document.getElementById('textPromptText').className = "inactive"; } function handleMessageBlur(str){ if(str.length == 0){ document.getElementById('textPromptText').className = "active"; }else{ document.getElementById('textPromptText').className = "inactive"; } } |
Browse Timeline
Comments ( 2 )
Do you mind if I use it in an android project I am working on?
@zitterbewegung added these pithy words on
Jul 19 10 at
5:54 am
Do you mind if I use it in a personal project also? I am trying to send sms messages using phonegap and this would be very useful.
@zitterbewegung added these pithy words on
Jul 19 10 at
6:00 am
