We Keep Coding

How to autogrow a textbox that has a variable font size

I am coding a website that lets you test typefaces and just like google fonts, the textarea in which you type should autogrow, when the user types in more text.
I tried this plugin by jaz303 and it works fine, if the font-size stays the same.
https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js
(function($) {
/**
* Auto-growing textareas; technique ripped from Facebook
*
*
* http://github.com/jaz303/jquery-grab-bag/tree/master/javascripts/jquery.autogrow-textarea.js
*/
$.fn.autogrow = function(options) {
return this.filter('textarea').each(function() {
var self = this;
var $self = $(self);
var minHeight = $self.height();
var noFlickerPad = $self.hasClass('autogrow-short') ? 0 : parseInt($self.css('lineHeight')) || 0;
var settings = $.extend({
preGrowCallback: null,
postGrowCallback: null
}, options);
var shadow = $('<div></div>').css({
position: 'absolute',
top: -10000,
left: -10000,
width: $self.width(),
fontSize: $self.css('fontSize'),
fontFamily: $self.css('fontFamily'),
fontWeight: $self.css('fontWeight'),
lineHeight: $self.css('lineHeight'),
resize: 'none',
'word-wrap': 'break-word'
}).appendTo(document.body);
var update = function(event) {
var times = function(string, number) {
for (var i = 0, r = ''; i < number; i++) r += string;
return r;
};
var val = self.value.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/\n$/, '<br/> ')
.replace(/\n/g, '<br/>')
.replace(/ {2,}/g, function(space) {
return times(' ', space.length - 1) + ' '
});
// Did enter get pressed? Resize in this keydown event so that the flicker doesn't occur.
if (event && event.data && event.data.event === 'keydown' && event.keyCode === 13) {
val += '<br />';
}
shadow.css('width', $self.width());
shadow.html(val + (noFlickerPad === 0 ? '...' : '')); // Append '...' to resize pre-emptively.
var newHeight = Math.max(shadow.height() + noFlickerPad, minHeight);
if (settings.preGrowCallback != null) {
newHeight = settings.preGrowCallback($self, shadow, newHeight, minHeight);
}
$self.height(newHeight);
if (settings.postGrowCallback != null) {
settings.postGrowCallback($self);
}
}
$self.change(update).keyup(update).keydown({
event: 'keydown'
}, update);
$(window).resize(update);
update();
});
};
However, I need the possibility for the user to change the font-size while testing and for some reason the autogrow doesn’t work anymore, as soon as I change the size.
Here is my Test jsFiddle:
http://jsfiddle.net/fquk6v3o/2/

The solution is to relaunch $("#autoGrowTextArea").autogrow(); when the slider value changes...
Sample code for doing this :
$("input[type='range']").change( function() {
$("#autoGrowTextArea").height("100px");
$("#autoGrowTextArea").autogrow();
});
New JSfiddle here : http://jsfiddle.net/newzy08/fquk6v3o/3/

You can achieve this with css as well using height and width in em units. Em means relative to the font-size of the element (2em means 2 times the size of the current font) w3schools.com/cssref/css_units.asp
I don't know if this works well together with the autogrowth plugin though.
$(document).ready(function(){
$("#font-small").click(function(){
$(".ta").css("font-size", "12px");
});
$("#font-big").click(function(){
$(".ta").css("font-size", "24px");
});
$("#font-huge").click(function(){
$(".ta").css("font-size", "36px");
});
});
.ta {
font-size: 12px;
height: 3em;
width: 10em;
resize: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<textarea class="ta">test</textarea>
</div>
<div>
<button id="font-small">fontsmall</button>
<button id="font-big">fontbig</button>
<button id="font-huge">fonthuge</button>
</div>

How to restrict number of characters per line in textarea?

I have one Ext JS TextArea. There I want to restrict my characters to 15 characters in each line and total number of lines should be not more than 10.
What I am tring to do here is
function(){
var myValue = this.getValue();
var myValueData = myValue.split(/\r*\n/);
myValueData.length = 10;
}
Ideally it should ommit all the lines after line number 10, but is not happening. Also how to restrict only upto 15 characters per line?

You can give that one a try, not perfect, but should work.
Maybe its be better instead using the change listeners, overwriting setValue or setRawValue functions on the component.
https://fiddle.sencha.com/#view/editor&fiddle/2js1
{
xtype: 'textareafield',
grow: true,
name: 'message',
fieldLabel: 'Message',
anchor: '100%',
listeners: {
change: function (cmp, newVal, oldVal) {
var arrayForEachLine = newVal.split(/\r\n|\r|\n/g);
var newVal = [];
Ext.Array.each(arrayForEachLine, function (line, index) {
if (line.length >= 10) {
offset = line;
while (offset.length > 0) {
newVal.push(offset.substring(0, 10));
offset = offset.substring(10);
}
} else {
newVal.push(line);
}
if (index === 10) return false;
if (newVal.length >= 10) {
newVal = newVal.slice(0, 10);
return false;
}
});
cmp.suspendEvent('change');
cmp.setValue(newVal.join('\n'));
cmp.resumeEvent('change');
}
}
}

This can be achieved by using the change listener. I have created a demo (fiddle). Please look at the fiddle as the code there is neat and has comments too. Please look at my change listener code below:
listeners: {
change: function () {
var myValue = Ext.getCmp('myField').getValue();
var lines = myValue.split("\n");
if (lines.length > 10) {
alert("You've exceeded the 10 line limit!");
Ext.getCmp('myField').setValue(textAreaValue);
} else { //if num of lines <= 10
for (var i = 0; i < lines.length; i++) { /
if (lines[i].length > 15) { /
alert("Length exceeded in line " + (i+1));
Ext.getCmp('myField').setValue(textAreaValue);
} else if (lines[i].length <= 15 && i == lines.length - 1) {
textAreaValue = myValue;
}
}
}
}
}
Please mark this as an answer if this answer solved your problem as this will also help other people in future. If there is anything wrong with this answer please let me know in the comments. I am sorry if something's wrong as I am not an extjs expert. But I still tried.

This problem is prefect for regex...
My solution focuses on the "max char width" and "max line number" requirements which I don't consider to be the same as "max char count" due to wrapping on words. Because this solution uses plain regex it works best with plain-text with newline chars \n for line breaks rather than html.
This function is idempotent which means it's output can be piped into it's input without issue. It's also very efficient because it's pure regex. Both of these attributes make it perfect for dropping into an onchange handler to update text on every key-press without incurring large performance penalties.
const fit = (str, w = 80, h = 24) => {
w = new RegExp(`(?![^\\n]{1,${w}}$)([^\\n]{1,${w}})\\s`, 'g');
str = str.replace(w, '$1\n');
h = new RegExp(`(((^|\\n)[^\\n]*){${h}})((($|\\n)[^\\n]*)+)`);
str = str.replace(h, '$1');
return str;
};
This function will format the string into the given width / height, but it does so in a very agreeable way: The wrapping regex is considerate of existing new lines which is why it's idempotent, and breaks lines between words not through them. For an in depth explanation of how the word wrap regex works and why it's robust, see my answer for word wrapping strings in JavaScript with regex:
Wrap Text In JavaScript

To restrict textarea character length you can use the following attribute maxlength .
<textarea maxlength="50">
To truncate a string or number.
text_truncate = function(str, length, ending) {
if (length == null) {
length = 100;
}
if (ending == null) {
ending = '...';
}
if (str.length > length) {
return str.substring(0, length - ending.length) + ending;
} else {
return str;
}
};
you can call it by
text_truncate(yourContentToTruncate,15);

This solution is using pure JavaScript.
The basic idea is creating an array of chunks made of 15 characters with .match(/.{1,10}/g) and then, joining the array with a line break join("\n") to create an string again. The number of lines are restricted just removing the remaining chunks using splice(10, chunks.length - 1).
We are using .onkeyup event, but could be another event, that's because the code is not fired until we release a key. But this code also works if we paste text inside the textarea because the event is fired as well.
document.getElementById("textArea").onkeyup = function() {
var text = this.value.replace("\n", "");
if (text.length > 15) {
var chunks = text.match(/.{1,15}/g);
if (chunks.length > 10) {
chunks.splice(10, chunks.length - 1);
alert("if text have more than 10 lines is removed");
}
this.value = chunks.join("\n");
}
};
<textarea rows="18" cols="50" id="textArea">
</textarea>

In the place where you are specifying the textarea field, you need to set 'enforceMaxLength' attribute to true and then set 'maxLength' attribute to number of characters as your limit. Please find the following sample code for extjs. In the example i have set the restriction of no more than 10 characters. Hope this helps.
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textarea',
name: 'name',
fieldLabel: 'Name',
enforceMaxLength:true,
maxLength:10,
allowBlank: false // requires a non-empty value
}]
});

for 10 line accept condition
$(document).ready(function(){
var lines = 10;
var linesUsed = $('#linesUsed');
$('#countMe').keydown(function(e) {
newLines = $(this).val().split("\n").length;
linesUsed.text(newLines);
if(e.keyCode == 13 && newLines >= lines) {
linesUsed.css('color', 'red');
return false;
}
else {
linesUsed.css('color', '');
}
});
});

I have written the solution which puts cuted characters to the start of the next line. Only 10 lines are allowed, in each line 15 characters.
Solution with Ext JS
Unfortunately, snippets on SO do not work with Ext JS.
And because of this you can see it on this codepen.io link.
Ext.application(
{
name: 'ExtApp',
launch: function ()
{
Ext.create('Ext.form.Panel',
{
title: 'Sample TextArea',
bodyPadding: 10,
renderTo: Ext.getBody(),
title: 'Restricted number of characters per line in textarea',
height: 500,
width: 700,
items:
[{
xtype: 'textareafield',
grow: true,
fieldLabel: 'Please write your text:',
height: 320,
width: 480,
listeners:
{
change: function(self, newVal)
{
var chunks = newVal.split(/\r*\n/g),
lastLineCutedTxt = '';
for(var i = 0; i < chunks.length; i++)
{
chunks[i] = lastLineCutedTxt + chunks[i];
if(chunks[i].length > 15)
{
lastLineCutedTxt = chunks[i].slice(15);
chunks[i] = chunks[i].slice(0, 15);
}
else lastLineCutedTxt = '';
}
if(lastLineCutedTxt != '')
chunks.push(lastLineCutedTxt);
self.suspendEvent('change');
self.setValue(chunks.slice(0, 10).join('\n'));
self.resumeEvent('change');
}
}
}]
});
}
});
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/theme-triton.js"></script>
Solution with pure JavaScript
var txtArea = document.getElementById('txt-area')
txtArea.onkeyup = function(e)
{
var chunks = this.value.split(/\r*\n/g),
lastLineCutedTxt = '';
for(var i = 0; i < chunks.length; i++)
{
chunks[i] = lastLineCutedTxt + chunks[i];
if(chunks[i].length > 15)
{
lastLineCutedTxt = chunks[i].slice(15);
chunks[i] = chunks[i].slice(0, 15);
}
else lastLineCutedTxt = '';
}
if(lastLineCutedTxt != '')
chunks.push(lastLineCutedTxt);
this.value = chunks.slice(0, 10).join('\n');
};
<textarea id="txt-area" rows="16" cols="35"></textarea>

How to input cents with mottie keyboard and keep them there?

I am going crazy over here... I've invested over 16 hours trying to get this thing to work, if anyone has any clue of the reason of this evil behavior please advice..
I have multiple inputs of type number inside a form where I attached the keyboard to each input like this:
$('.amount').keyboard({
layout: 'custom',
customLayout : {
'normal' : ['1 2 3', '4 5 6', '7 8 9','{clear} 0 {bksp}','{accept}']
},
display : {
'accept' : 'Confirm:Confirm (Shift-Enter)',
'bksp' : 'Delete:Delete',
'clear': 'Clear:Clear'
},
beforeVisible: function(e, keyboard, el) {
$("#"+keyboard.$keyboard[0].id).addClass("hide-me");
},
restrictInput: true,
preventPaste: true,
autoAccept: true,
usePreview: false,
useWheel: false,
repeatRate: 0,
// this function is so I can display cents in the input
// there is no decimal in the keyboard as part of the requirements
change: function(e, keyboard, el) {
if (el.value === null || el.value === "") {
el.value = "0.00";
}
el.value = parseInt(el.value);
el.value = el.value * 0.01;
},
// this function is so I can display cents in the inputs
// there is no decimal in the keyboard as part of the requirements
accepted: function(e, keyboard, el) {
if (el.value === null || el.value === "") {
el.value = "0.00";
}
el.value = parseInt(el.value);
el.value = el.value * 0.01;
},
caretToEnd: 'true',
maxLength : '20',
css: {
container: 'center-block dropdown-menu custom-keypad',
buttonDefault: 'btn-kb',
buttonHover: 'btn-primary',
buttonAction: 'active',
buttonDisabled: 'disabled'
}
});
Keyboard pops up as it should, I can see the decimals in my input correctly as I type and as I confirm my input. My goal is to sum all the input.val() and validate them as soon any change happens on the form. That functionality to do that is like this:
$('form').on('change', '.amount', function () {
var balance = NUMBER;
var sum = 0;
$(".amount").each(function (){
var valTotal = Number($(this).val());
if (!isNaN(valTotal)) {
sum += valTotal;
}
});
if (sum > balance) {
//stuff happens
}
});//.end of form
Here is where the problem starts, when I go to sum the inputs, my decimals disappear! what was 22.22 is now 2222 so my sum is wrong, causing my sum to be always larger that my balance. I tried to create a fiddle but it won't pop the keyboard on the result box so I can't show you a live example..
This are the CDN's I'm using:
https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.26.17/js/jquery.keyboard.extension-all.min.js
https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.26.17/js/jquery.keyboard.min.js
PLEASE ADVICE!!

So I got in touch with the creator of the plugin and he was kind enough to answer my question via email. His solution worked perfectly!
You can see the fiddle right here..
http://jsfiddle.net/Mottie/egb3a1sk/2506/
/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {
// this function is so I can display cents in the input
// there is no decimal in the keyboard as part of the requirements
function convert(el) {
var value = el.value;
if (el.value === null || el.value === "") {
value = "0.00";
}
value = parseInt(value, 10);
value = value * 0.01;
el.value = value.toFixed(2);
}
NUMBER = 100;
function sum() {
var balance = NUMBER;
var sum = 0;
$(".amount:not(:disabled)").each(function() {
var valTotal = Number($(this).val());
if (!isNaN(valTotal)) {
sum += valTotal;
}
});
if (sum > balance) {
//stuff happens
}
$('.sum').text(sum);
}
$('.amount').keyboard({
layout: 'custom',
customLayout: {
'normal': ['1 2 3', '4 5 6', '7 8 9', '{clear} 0 {bksp}', '{accept}']
},
display: {
'accept': 'Confirm:Confirm (Shift-Enter)',
'bksp': 'Delete:Delete',
'clear': 'Clear:Clear'
},
beforeVisible: function(e, keyboard, el) {
$("#" + keyboard.$keyboard[0].id).addClass("hide-me");
},
restrictInput: true,
preventPaste: true,
autoAccept: true,
usePreview: false,
useWheel: false,
repeatRate: 0,
change: function(e, keyboard, el) {
convert(el);
},
accepted: function(e, keyboard, el) {
convert(el);
sum();
},
caretToEnd: 'true',
maxLength: '20',
css: {
container: 'center-block dropdown-menu custom-keypad',
buttonDefault: 'btn-kb',
buttonHover: 'btn-primary',
buttonAction: 'active',
buttonDisabled: 'disabled'
}
});
});
The main issue was that the $('.amount') selector was including a hidden duplicate input so he changed it to $(".amount:not(:disabled)")
And he also performed the sum() operation right after the formatting happened on 'accepted'
Worked perfectly =)

TinyMCE 4.x count character

I trying to create character count on tiny mce 4.x. I create counter but I can limit user to type.
tinymce.init({
selector:'textarea',
charLimit : 20, // this is a default value which can get modified later
setup: function(editor) {
editor.on('KeyUp', function(e) {
var tinymax, tinylen, htmlcount;
tinymax = this.settings.charLimit;
tinylen = this.getContent().length;
$("#charNum").html(tinylen);
if (tinylen > tinymax) {
$("#charNum").html(tinylen);
// STOP TYPE
}
});
}
});
I add e.preventDefault(); but now user can not delete input
if (tinylen > tinymax) {
$("#charNum").html(tinylen);
e.preventDefault();
}

Here is an example:
var max = 5;
$('#a').on('keyup', function(){
var val = $(this).val();
if( val.length > max ){
$(this).val(val.substr(val, max));
}
});
So, if the input length is higher than maximum permitted, just cut it.
Check the jsFiddle

Can I create an HTML input field that stops accepting characters when it is "full"?

I would like to create HTML input fields (either single-line or textarea) that stop accepting new text when they are "full" - i.e. when there is no more room in the widget for new characters to be displayed.
This is different from a putting a maxlength limit on the number of characters, as (for example) 65 lowercase letter "i"s take up much less space than 65 uppercase "W"s in proportional fonts.
Is there a way to do this? (If there is, the solution would ideally also cover when text is pasted in, and truncate all the text over the limit).
Edit: The solution has to work with proportional fonts - maxlength does not help here, we are not interested in stopping at a character length.

The following uses the answer from https://stackoverflow.com/a/5047712/212869 to calculate the width of text, and I linked it to a textbox. Its really rough code :D but it does limit the textbox fairly well. The same principle could be used on a text area, but you would also have do it for both height and width.
http://jsfiddle.net/LMKtd/1/ - it outputs stuff to console so best to have it open if you have a look.
String.prototype.width = function(font) {
var f = font || '12px arial',
o = $('<div>' + this + '</div>')
.css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
.appendTo($('body')),
w = o.width();
o.remove();
return w;
}
$('#textinput').on('keyup', validatetext);
function validatetext(e) {
var w = parseInt(e.target.value.width());
if (w > 100) {
console.log("Width Gt 100px ["+w+"px] Char Count ["+e.target.value.length+"]");
do {
e.target.value = e.target.value.slice(0,-1);
} while (parseInt(e.target.value.width()) > 100)
} else {
console.log("Keep going! ["+w+"px] Char Count ["+e.target.value.length+"]");
}
}
Update
http://jsfiddle.net/LMKtd/8/
I've bodged together one for the text area too. It doesnt stop you going over the limits but it tells you when its too wide or tall. It's not very pretty :D
String.prototype.width = function(font) {
var f = font || '12px arial',
o = $('<div>' + this + '</div>')
.css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'visible', 'font': f})
.appendTo($('body')),
w = o.width();
o.remove();
return w;
}
String.prototype.height = function(font) {
var f = font || '12px arial',
o = $('<div>' + this.replace(/[\r\n]/g,'<br />') + '</div>')
.css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
.appendTo($('body')),
w = o.height();
o.remove();
return w;
}
$('#textinput').on('keyup', validatetext);
$('#areainput').keyup(validatearea);
function validatearea(e) {
var w = parseInt($(this).val().width());
var h = parseInt($(this).val().height());
var errw = false;
var errh = false;
if (h>100) {
errh = true
}
var lines = $(this).val().split(/[\r\n]/);
var errw = false;
for (var i = 0; i<lines.length; i++) {
if (parseInt(lines[i].width()) > 100) {
errw = true;
}
}
if ((errh == true) || (errw == true)) {
if ((errh == true) && (errw == false)) {
$('#areaerror').html("Too Tall, Width OK");
}
if ((errh == false) && (errw == true)) {
$('#areaerror').html("Height OK, Too Wide");
}
if ((errh == true) && (errw == true)) {
$('#areaerror').html("Too Tall, Too Wide");
}
} else {
$('#areaerror').html("Were Good");
}
}
function validatetext(e) {
var w = parseInt(e.target.value.width());
if (w > 100) {
console.log("Width Gt 100px ["+w+"px] Char Count ["+e.target.value.length+"]");
do {
e.target.value = e.target.value.slice(0,-1);
} while (parseInt(e.target.value.width()) > 100)
} else {
console.log("Keep going! ["+w+"px] Char Count ["+e.target.value.length+"]");
}
}

You can use the maxlength attribute
<input type="text" id="Textbox" name="Textbox" maxlength="10" />

How about jquery inputfit plugin ? check the demo and source
You might change the source to accommodate your requirements. Obviously you have to use jquery library an may not be suitable if you are searching for a solution in plain-JavaScript.
check the options (min size, max size) they seems fit for your requirement