TextArea Length With Link Fetch Elzero
by Salem Yaslim
HTML
<form action="." method="get">
<textarea id="my-text" rows="5"></textarea>
Left: <span id="my-span"></span>
<hr>
<input type="submit" value="submit" id="my-submit" />
</form>
JavaScript
var myText = document.getElementById("my-text"),
mySpan = document.getElementById("my-span"),
mySubmit = document.getElementById("my-submit"),
maxLength = mySpan.textContent | 50,
linkCount = 20;
myText.oninput = function() {
'use strict';
var fetchUrl = myText.value.replace(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/gim,Array(linkCount+1).join("."));
var inSpan = maxLength - fetchUrl.length;
mySpan.textContent = inSpan;
if (inSpan < 0) {
mySpan.style.color = "#AA0000";
mySubmit.setAttribute("disabled", true);
} else {
mySpan.style.color = "#000";
mySubmit.removeAttribute("disabled");
}
if(inSpan == maxLength){
mySubmit.setAttribute("disabled", true);
}
};
mySubmit.setAttribute("disabled", true);
mySpan.textContent = maxLength;