How to Create Responsive SMS BOX With Bootstrap
Posted By : Awadhesh Kumar | 30-Jun-2015
I have created SMS Box with bootstrap layout. I have given 140 character limit in this box using jquery function after which user can not type further character. This code is also responsive in nature due to bootstrap class and also the example is for the developers who want to handle the word limit in front end without any outside jquery plugin. I have used example of the send SMS and also it could be used for restricting writing summary.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>
SMS box
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div style="margin-top:50px;" class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Send SMS</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
+91
</span>
<input type="text" class="form-control borderRadius" name="username" value="" placeholder="Enter Your Mobile Number">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<textarea class="form-control input-sm borderRadius " type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<span class="help-block">
<p id="characterlimit" class="help-block ">Left </p>
</span>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6" align="right">
<button class="btn btn-success disabled" id="btnSubmit" name="btnSubmit" type="button">Send SMS</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
Jquery Code
Below is the code for the jquery. In which we are using keydown function to read the chapacters each time and on exceeding 140 chracters, we show error message.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Awadhesh Kumar
Awadhesh is an experienced UI developer with expertise in HTML 5, CSS 3, jQuery, Bootstrap and AngularJS.