Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 15, 2015 19:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/a57e9ad226769a05e983 to your computer and use it in GitHub Desktop.
Save anonymous/a57e9ad226769a05e983 to your computer and use it in GitHub Desktop.
Download ZIP
A Restricted Text Area Alex Powelson Assignment 2 part 2 // source http://jsbin.com/qalug
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta name="description" content="Alex Powelson Assignment 2 part 2" />
<meta charset="utf-8">
<title>A Restricted Text Area</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
<style id="jsbin-css">
// From: http://www.assemblesoft.com/examples/form/simpleform.html
* {margin:0; padding:0;}
html {
font: 90%/1.3 arial,sans-serif;
padding:1em;
background:#B9C2CC;
}
form {
background:#fff;
padding:1em;
border:1px solid #eee;
}
fieldset div {
margin:0.3em 0;
clear:both;
}
form {
margin:1em;
width:15em;
}
label {
float:none;
width:12em;
display:block;
clear:both;
}
legend {
color:#0b77b7;
font-size:1.4em;
}
legend span {
width:10em;
text-align:right;
}
input {
padding:0.15em;
width:10em;
border:1px solid #ddd;
background:#fafafa;
font:bold 1em arial, sans-serif;
-moz-border-radius:0.4em;
-khtml-border-radius:0.4em;
display:block;
float:left;
}
input:hover, input:focus {
border-color:#c5c5c5;
background:#f6f6f6;
}
fieldset {
border:1px solid #ddd;
padding:0 0.5em 0.5em;
}
.date input {
background-image:url(../gfx/calendar-small.gif);
background-repeat:no-repeat;
background-position:100% 50%;
}
.date fieldset label {
float:none;
display:block;
text-align:left;
width:auto;
}
.date fieldset div {
float:left;
clear:none;
margin-right:0.2em;
}
.radio, .date {
position:relative;
}
.radio fieldset, .date fieldset {
border:none;
width:auto;
padding:1px 0 0 11em;
}
.radio legend, .date legend {
font-size:1em;
color:#000;
}
.radio legend span, .date legend span {
position:absolute;
left:0;
top:0.3em;
width:10em;
display:block;
}
.radio label, .radio input {
vertical-align:middle;
display:inline;
float:none;
width:auto;
background:none;
border:none;
}
.radio div {
float:left;
white-space:nowrap;
clear:none;
}
.email {
width:14em;
}
input.default {
color:#bbb;
}
#submit {
margin:1em;
width:69px;
height:26px;
overflow:hidden;
border:0;
display:block;
cursor:pointer !important; cursor:hand;
}
#submit:hover {
background-position:0 -26px;
}
textarea {
padding:0.15em;
width: 200px;
height: 50px;
display: block;
}
.error {
color: ##FF1400;
}
/*
:invalid {
color:red;
}
*/
/*
input[type=checkbox], input[type=radio] { visibility: hidden; width:0; height:0; padding:0; margin:0; }
input[type=checkbox] + label, input[type=radio] + label { padding-left:18px; }
input[type=checkbox] + label{ background: url(../gfx/check_radio.png) 0 0 no-repeat; }
input[type=checkbox]:focus + label{ background-position: 0 -16px; }
input[type=checkbox] + label:hover{ background-position: 0 -32px; }
input[type=checkbox]:checked + label{ background-position: 0 -48px; }
input[type=radio] + label{ background: url(../gfx/check_radio.png) 0 -64px no-repeat; }
input[type=radio]:focus + label{ background-position: 0 -80px; }
input[type=radio] + label:hover{ background-position: 0 -96px; }
input[type=radio]:checked + label{ background-position: 0 -112px; }
*/
</style>
</head>
<body>
<!-- text.html -->
<form action="" method="post" id="theForm">
<fieldset>
<p>Enter your comments below (50 characters max).</p>
<div><label for="comments">Comments</label><textarea name="comments" id="comments" maxlength="50" required></textarea></div>
<div><label for="count">Character Count</label><input type="number" name="count" id="count"></div>
<div><label for="result">Result</label><textarea name="result" id="result"></textarea></div>
<div><input type="submit" value="Submit" id="submit"></div>
</fieldset>
</form>
<script src="js/text.js"></script>
<script id="jsbin-javascript">
// Script 4.7 - text.js
// This script limits the amount of text that can be entered into a textarea.
// Function called when the form is submitted.
// Function limits the text and returns false.
function limitText() {
'use strict';
// For storing the limited text, declare a limitedText variable
var limitedText;
// Get a reference to the form value:
var originalText = document.getElementById('comments').value;
// Use the lastIndexOf() method to find the last space
// before 50 characters
var lastSpace = originalText.lastIndexOf(' ');
// Use the slice() method to trim the text from the first
// character to the lastSpace position you just found
limitedText = originalText.slice(originalText, lastSpace);
// Display the number of characters submitted:
document.getElementById('count').value = limitedText.length;
// Display the limitedText:
document.getElementById('result').value = limitedText;
// Return false to prevent submission:
return false;
} // End of limitText() function.
// Function called when the window has been loaded.
// Function needs to add an event listener to the form.
function init() {
'use strict';
document.getElementById('theForm').onsubmit = limitText;
} // End of init() function.
window.onload = init;
</script>
<script id="jsbin-source-css" type="text/css">// From: http://www.assemblesoft.com/examples/form/simpleform.html
* {margin:0; padding:0;}
html {
font: 90%/1.3 arial,sans-serif;
padding:1em;
background:#B9C2CC;
}
form {
background:#fff;
padding:1em;
border:1px solid #eee;
}
fieldset div {
margin:0.3em 0;
clear:both;
}
form {
margin:1em;
width:15em;
}
label {
float:none;
width:12em;
display:block;
clear:both;
}
legend {
color:#0b77b7;
font-size:1.4em;
}
legend span {
width:10em;
text-align:right;
}
input {
padding:0.15em;
width:10em;
border:1px solid #ddd;
background:#fafafa;
font:bold 1em arial, sans-serif;
-moz-border-radius:0.4em;
-khtml-border-radius:0.4em;
display:block;
float:left;
}
input:hover, input:focus {
border-color:#c5c5c5;
background:#f6f6f6;
}
fieldset {
border:1px solid #ddd;
padding:0 0.5em 0.5em;
}
.date input {
background-image:url(../gfx/calendar-small.gif);
background-repeat:no-repeat;
background-position:100% 50%;
}
.date fieldset label {
float:none;
display:block;
text-align:left;
width:auto;
}
.date fieldset div {
float:left;
clear:none;
margin-right:0.2em;
}
.radio, .date {
position:relative;
}
.radio fieldset, .date fieldset {
border:none;
width:auto;
padding:1px 0 0 11em;
}
.radio legend, .date legend {
font-size:1em;
color:#000;
}
.radio legend span, .date legend span {
position:absolute;
left:0;
top:0.3em;
width:10em;
display:block;
}
.radio label, .radio input {
vertical-align:middle;
display:inline;
float:none;
width:auto;
background:none;
border:none;
}
.radio div {
float:left;
white-space:nowrap;
clear:none;
}
.email {
width:14em;
}
input.default {
color:#bbb;
}
#submit {
margin:1em;
width:69px;
height:26px;
overflow:hidden;
border:0;
display:block;
cursor:pointer !important; cursor:hand;
}
#submit:hover {
background-position:0 -26px;
}
textarea {
padding:0.15em;
width: 200px;
height: 50px;
display: block;
}
.error {
color: ##FF1400;
}
/*
:invalid {
color:red;
}
*/
/*
input[type=checkbox], input[type=radio] { visibility: hidden; width:0; height:0; padding:0; margin:0; }
input[type=checkbox] + label, input[type=radio] + label { padding-left:18px; }
input[type=checkbox] + label{ background: url(../gfx/check_radio.png) 0 0 no-repeat; }
input[type=checkbox]:focus + label{ background-position: 0 -16px; }
input[type=checkbox] + label:hover{ background-position: 0 -32px; }
input[type=checkbox]:checked + label{ background-position: 0 -48px; }
input[type=radio] + label{ background: url(../gfx/check_radio.png) 0 -64px no-repeat; }
input[type=radio]:focus + label{ background-position: 0 -80px; }
input[type=radio] + label:hover{ background-position: 0 -96px; }
input[type=radio]:checked + label{ background-position: 0 -112px; }
*/</script>
<script id="jsbin-source-javascript" type="text/javascript">// Script 4.7 - text.js
// This script limits the amount of text that can be entered into a textarea.
// Function called when the form is submitted.
// Function limits the text and returns false.
function limitText() {
'use strict';
// For storing the limited text, declare a limitedText variable
var limitedText;
// Get a reference to the form value:
var originalText = document.getElementById('comments').value;
// Use the lastIndexOf() method to find the last space
// before 50 characters
var lastSpace = originalText.lastIndexOf(' ');
// Use the slice() method to trim the text from the first
// character to the lastSpace position you just found
limitedText = originalText.slice(originalText, lastSpace);
// Display the number of characters submitted:
document.getElementById('count').value = limitedText.length;
// Display the limitedText:
document.getElementById('result').value = limitedText;
// Return false to prevent submission:
return false;
} // End of limitText() function.
// Function called when the window has been loaded.
// Function needs to add an event listener to the form.
function init() {
'use strict';
document.getElementById('theForm').onsubmit = limitText;
} // End of init() function.
window.onload = init;
</script></body>
</html>
Raw
jsbin.qalug.css
// From: http://www.assemblesoft.com/examples/form/simpleform.html
* {margin:0; padding:0;}
html {
font: 90%/1.3 arial,sans-serif;
padding:1em;
background:#B9C2CC;
}
form {
background:#fff;
padding:1em;
border:1px solid #eee;
}
fieldset div {
margin:0.3em 0;
clear:both;
}
form {
margin:1em;
width:15em;
}
label {
float:none;
width:12em;
display:block;
clear:both;
}
legend {
color:#0b77b7;
font-size:1.4em;
}
legend span {
width:10em;
text-align:right;
}
input {
padding:0.15em;
width:10em;
border:1px solid #ddd;
background:#fafafa;
font:bold 1em arial, sans-serif;
-moz-border-radius:0.4em;
-khtml-border-radius:0.4em;
display:block;
float:left;
}
input:hover, input:focus {
border-color:#c5c5c5;
background:#f6f6f6;
}
fieldset {
border:1px solid #ddd;
padding:0 0.5em 0.5em;
}
.date input {
background-image:url(../gfx/calendar-small.gif);
background-repeat:no-repeat;
background-position:100% 50%;
}
.date fieldset label {
float:none;
display:block;
text-align:left;
width:auto;
}
.date fieldset div {
float:left;
clear:none;
margin-right:0.2em;
}
.radio, .date {
position:relative;
}
.radio fieldset, .date fieldset {
border:none;
width:auto;
padding:1px 0 0 11em;
}
.radio legend, .date legend {
font-size:1em;
color:#000;
}
.radio legend span, .date legend span {
position:absolute;
left:0;
top:0.3em;
width:10em;
display:block;
}
.radio label, .radio input {
vertical-align:middle;
display:inline;
float:none;
width:auto;
background:none;
border:none;
}
.radio div {
float:left;
white-space:nowrap;
clear:none;
}
.email {
width:14em;
}
input.default {
color:#bbb;
}
#submit {
margin:1em;
width:69px;
height:26px;
overflow:hidden;
border:0;
display:block;
cursor:pointer !important; cursor:hand;
}
#submit:hover {
background-position:0 -26px;
}
textarea {
padding:0.15em;
width: 200px;
height: 50px;
display: block;
}
.error {
color: ##FF1400;
}
/*
:invalid {
color:red;
}
*/
/*
input[type=checkbox], input[type=radio] { visibility: hidden; width:0; height:0; padding:0; margin:0; }
input[type=checkbox] + label, input[type=radio] + label { padding-left:18px; }
input[type=checkbox] + label{ background: url(../gfx/check_radio.png) 0 0 no-repeat; }
input[type=checkbox]:focus + label{ background-position: 0 -16px; }
input[type=checkbox] + label:hover{ background-position: 0 -32px; }
input[type=checkbox]:checked + label{ background-position: 0 -48px; }
input[type=radio] + label{ background: url(../gfx/check_radio.png) 0 -64px no-repeat; }
input[type=radio]:focus + label{ background-position: 0 -80px; }
input[type=radio] + label:hover{ background-position: 0 -96px; }
input[type=radio]:checked + label{ background-position: 0 -112px; }
*/
Raw
jsbin.qalug.js
// Script 4.7 - text.js
// This script limits the amount of text that can be entered into a textarea.
// Function called when the form is submitted.
// Function limits the text and returns false.
function limitText() {
'use strict';
// For storing the limited text, declare a limitedText variable
var limitedText;
// Get a reference to the form value:
var originalText = document.getElementById('comments').value;
// Use the lastIndexOf() method to find the last space
// before 50 characters
var lastSpace = originalText.lastIndexOf(' ');
// Use the slice() method to trim the text from the first
// character to the lastSpace position you just found
limitedText = originalText.slice(originalText, lastSpace);
// Display the number of characters submitted:
document.getElementById('count').value = limitedText.length;
// Display the limitedText:
document.getElementById('result').value = limitedText;
// Return false to prevent submission:
return false;
} // End of limitText() function.
// Function called when the window has been loaded.
// Function needs to add an event listener to the form.
function init() {
'use strict';
document.getElementById('theForm').onsubmit = limitText;
} // End of init() function.
window.onload = init;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment