Creating An Tweet Like Text Box with jQuery - Tweetbox

Tweetbox is a jQuery plugin which converts an DIV container into a Tweet-like text box with support for character limit/counter, #Hashtag, @Mention and URL highlighting.

How to use it:

1. Add the jQuery library and other necessary resources at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/rangy-core.js" type="text/javascript"></script>
<script src="js/rangy-textrange.js" type="text/javascript"></script>

2. Add the jQuery tweetbox plugin after jQuery library.

<script src="js/jquery.tweetbox.js" type="text/javascript"></script>

3. Create an DIV element for the Tweet-like text box.

<div id="demo">

  ...

</div>

4. The sample CSS to customize the styles of the hash tags, mentions and URLs.

#demo {
  position: absolute;
  width: 80%;
  left: 10%;
  top: 50px;
  height: 300px;
  border: 1px solid black;
  background-color: white;
  font-size: 18px;
  padding: 1%;
}

.mention,
.hashtag,
.url {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2px 4px;
}

.mention {
  color: #fff;
  background-color: #c0392b;
}

.hashtag {
  color: #fff;
  background-color: #34495e;
  padding: 5px;
}

.url {
  color: #fff;
  background-color: #2980b9;
  text-decoration: underline;
}
.tweet-box-editable:afterr {
 content:' #tweetrm';
 color:rgba(0,0,0,.4);
}

div.tweet-box-bottom { background-color: #5facdd; }

button.tweet-box-button {
  background-color: #81c0e9;
  border: 1px solid #3990cd;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: white;
  font-weight: bold;
}

div.tweet-box-info {
  font-size: 12px;
  color: rgba(255,255,255,.8);
}

4. Initialize the plugin by calling the function on the DIV container.

<script type="text/javascript">
$(function(){
$('#demo').tweetbox();
});
</script>

5. Available options to customize the plugin.

<script type="text/javascript">
$(function(){
$('#demo').tweetbox({
cb:false, // callback function for submission
css:{'font-size':'inherit'}, // CSS to apply to the editor
default:false, // default content, good for replies
postfix:' #tweetrm', // add content to an end of a tweet, reduces available characters
limit:140, // change the twitter character limit (from 140)
highlight:[ // regular expressions matching content and what span[class] they get
{match:/\[email protected]\w+/g,class:'mention'},
{match:/\B#\w+/g,class:'hashtag'},
{match:/(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi,class:'url'}
],
action:'tweet', // specify if it is a tweet or retweet
button:{ // hash for button text key being the action
tweet:'Tweet',
reply:'Tweet Reply'
}
});
});
</script>

---

This awesome jQuery plugin is developed by gdbate. For more Advanced Usages, please check the demo page or visit the official website.