How can I make a textarea with character limit highlighting like Twitter? - javascript

Twitter's submit tweet textbox highlights the characters that are over the character limit:
As you can see, the characters that overrun the character limit are highlighted in red. How can I achieve something like this?

You'll find the necessary solution and required code here:
How to insert <em> tag when exceeding 140 limit i.e. going negative?
...and here:
REGEX - Highlight part over 19 chars
Your question appears to be duplicitous.
Note: I didn't have the option to post the above links as a comment (i.e. privilege contingent on reputation).
Here's the code as per Simon Kuang's recommendation (see comments):
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h3>Your text here</h3>
<div contenteditable="true" id="myDiv">edit me
</div>
<p>
<h3>Stuff over 19 characters</h3>
<div id="extra">
</div>
<p>
<h3>Sample output</h3>
<div id="sample">
</div>
</body>
</html>
CSS:
.highlight {
color:red;
}
JavaScript:
$(document).ready(function() {
$('#myDiv').keyup(function() {
var content = $('#myDiv').html();
var extra = content.match(/.{19}(.*)/)[1];
$('#extra').html(extra);
var newContent = content.replace(extra, "<span class='highlight'>" + extra + "</span>");
$('#sample').html(newContent);
});
});

Here is the example, show alert when the limit is reached and thereafter highlight all the characters entered.
$(document).ready(function() {
var input = $('#text_text');
var warning = $('#warning');
var char_limit = 30;
input.on('keyup', function() {
var val = $(this).val();
if (val.length > parseInt(char_limit)) {
alert("limit reached");
warning.html('hello').css('display', 'block');
l = val.length
var input = document.getElementById("text_text");
input.setSelectionRange(char_limit, l);
input.focus();
} else {
warning.css('display', 'none');
}
});
});
#warning {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test_box">
<textarea name="msg" cols="50" rows="5" id="text_text"></textarea>
<div id="warning"></div>
</div>

Try this (pattern)
html
<data></data><br />
<textarea maxlength="20" placeholder="20 character limit"></textarea>
js
$(function () {
$(document).on("keyup", "textarea", function (e) {
if ($(e.target).val().length >= 20) {
$("data").text($(e.target).attr("placeholder"))
.fadeIn(1000).fadeOut(9000);
};
});
});
jsfiddle http://jsfiddle.net/guest271314/8RScd/

Related

jquery : how to toggle div after using search function on it?

I'm using a search function to highlight text (function 2) in different chapters. In parallel most of this text is stored in div called content to ease reading. You can toggle these div to read the text (function 1).
When text is found by function 2, it's no longer possible to toggle the text in this chapter. I suppose this is related to use of "this" in function 1 (If I delete this it works) or handlers (if I add live in front of click in function 1 it works but live is deprecated and remplacement "on" is not working).
// function 1 : toggle content when clicking the button
$(".chapter button").on('click',function(f) { //live deprecated to be replaced
f.preventDefault();
var id = $(this).attr('id');
console.log(id)
$('#' + id + '+*').toggle();
// toggle is not working when highlight function located in item in this specific chapter
});
// function 2 : highlight content
$('#monForm').submit(function(e) {
e.preventDefault();
console.log('submitted')
// clear form
var str = $('#valeurForm').val();
$('#valeurForm').val("");
console.log(str);
// highlight
var strCut = str.split(' ');
for (i = 0; i < strCut.length; i++) {
// grey chapter where the word is located
$("div[class='chapter']:contains(" + strCut[i] + ")").css("color", "#929aab");
// and highlight in red specific word
// but i want to highlight all occurences of the word in this chapter ? how can I define index d ?
$("div[class='chapter']:contains(" + strCut[i] + ")").each(function(d) {
$(this).html($(this).html().replace(strCut[i], '<font color="red">$&</font>'));
});
};
});
<head>
<meta charset="utf-8">
<style>
.content {
display: none;
}
</style>
</head>
<body>
<form name="search" id="monForm">
<input type="text" id="valeurForm">
</form>
<div class="chapter">
chapter 1
<button type="button" id="chapter1">Display content</button>
<div class="content">
content chapter1
</div>
</div>
<br>
<div class="chapter">
chapter 2
<button type="button" id="chapter2">Display content</button>
<div class="content">
content chapter2
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- jQuery est inclus ! -->
</body>
The problem was your $(this).html(). The .replace that you did removes the event listener of your button, because it modifies the DOM. Instead of getting the whole .html(), I did it with .children(), and then replaced just the text of it.
About replacing all the occurrences of the chapter word, you could use a Regular Expression. Using a string will replace just the first occurrence of the string. With the regular expression you can replace all of them.
// function 1 : toggle content when clicking the button
$(".chapter button").click(function(f) { //live deprecated to be replaced
f.preventDefault();
var id = $(this).attr('id');
$('#' + id + '+*').closest('.content').toggle();
// toggle is not working when highlight function located in item in this specific chapter
});
// function 2 : highlight content
$('#monForm').submit(function(e) {
e.preventDefault();
console.log('submitted')
// clear form
var str = $('#valeurForm').val();
$('#valeurForm').val("");
// highlight
var strCut = str.split(' ');
for (i = 0; i < strCut.length; i++) {
// grey chapter where the word is located
$("div[class='chapter']:contains(" + strCut[i] + ")").css("color", "#929aab");
// and highlight in red specific word
$("div[class='chapter']:contains(" + strCut[i] + ")").each(function(d) {
var regex = new RegExp(strCut[i],"g")
$(this).children().each(function (index,element) {
const text = $(element).html().replace(regex,'<font color="red">$&</font>')
$(element).html(text)
})
});
};
});
<head>
<meta charset="utf-8">
<style>
.content {
display: none;
}
</style>
</head>
<body>
<form name="search" id="monForm">
<input type="text" id="valeurForm">
</form>
<div class="chapter">
chapter 1
<button type="button" id="chapter1">Display content</button>
<div class="content">
content chapter1 and the second ocurrence of chapter also highlighted
</div>
</div>
<br>
<div class="chapter">
chapter 2
<button type="button" id="chapter2">Display content</button>
<div class="content">
content chapter2
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- jQuery est inclus ! -->
</body>
EDIT
I wasn't clear enough about the errors, sorry, and I've noticed the right solution.
The point is that, instead of modifying the parent element, I've changed the text of the childrens. When you change the whole html, you remove the listener of your buttons when you add it again to the html, and that's why isn't possible to toggle the divs.

How to underline onclick and add to textarea

I have this code that enables the users to add a list of keywords to a text area and than submit it. The list will show on a div, then the user has to select one or many words in one line to add it to id="out".
The code is working as of now, but it's not what I want and I'm blocked. What I want is that the user can click (instead of select) one or many words to underline them and then click on the image to add them as a line to id="out".
I've big trouble to solve this as my JS knowledge is very limited, but I hope to learn quickly by working on similar projects and I've a lot in mind.
Thank you
Code:
var arraySearchTerms = [];
function add() {
arraySearchTerms = document.getElementById("searchTerms").value.split('\n');
let newKeywordHtmlStr = '';
for (var i = 0; i < arraySearchTerms.length; i++) {
newKeywordHtmlStr += '<div style="padding: 6px;border-bottom: #b5aeae; border-bottom-style: solid;border-bottom-width: 1px;"><span id="term' + i + '">' + arraySearchTerms[i] + "</span><span style='float: right;'><img src='Red_Cross.png' height='15' width='11'/></span></div>";
}
document.getElementById("keywords").innerHTML += newKeywordHtmlStr;
}
function get_selection() {
var txt = '';
if (window.getSelection) {
txt = window.getSelection().toString();
} else if (document.selection) {
txt = document.selection.createRange().keywords;
}
document.getElementById("out").innerHTML += txt;
}
<TITLE>Test</TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="negative.css">
<div id="container">
<div id="container2">
Add your search terms:
<textarea type="text" id="searchTerms">
</textarea> <br />
<button onclick="add()">Add >></button><br />
<br /><br /> Negative keywords:
<textarea type="text" id="out"></textarea>
</div>
<div id="container1">
Search terms:
<div id="keywords" onclick="get_selection()"></div>
</div>
</div>
<script src="negative.js"></script>

My JQuery post data to 'textbox' how to post it to 'div'?

I'm very new to JQuery.
I already can, get the data from textbox and do some calculation and show it to other 'textbox' though I want to post it to 'div' or 'p' whatever it is as long as not textbox.
here's my code
<div id="result" style="display:none;">
<div class="col-sm-5 text-right"><label>Participant fee (IDR):</label></div>
<div class="col-sm-7"id="parcost" ></div>
<div class="col-sm-5 text-right"><label>Populi fee (IDR):</label></div>
<div class="col-sm-7"><input type="text" id="popcost"></div>
<div class="col-sm-5 text-right"><label>Total Estimated Cost (IDR):</label></div>
<div class="col-sm-7"><input type="text" id="totcost"></div>
</div>
$(document).ready(function(){
$('#calc').click(function(){
var num_participant = parseInt($("num_participant").val());
var reward = parseInt($("reward").val());
var esttime = parseInt($("esttime").val());
var parcost = num_participant*reward;
var popcost = (parcost*0.1)+(num_participant*150);
var totcost = parcost+popcost;
/*
document.getElementById("result").style.display = "block";
document.getElementById("parcost").value = parcost;
document.getElementById("popcost").value = popcost;
document.getElementById("totcost").value = totcost;*/
document.getElementById("result").style.display = "block";
$("#parcost").html(parcost);
$("#popcost").html(popcost);
$("#totcost").html(totcost);
return false;
});
});
Still wont work, if I change it from "document.getelementById" to "$".
and even using "document.getelementById" it won't showed on the "div".
any ideas?
I'm not sure if you're asking this but try something like this,
var totCost = document.getElementById("totcost").value;
$("#yourDivID").html(totCost);
I'm not sure what you are asking about but if you want to send the result to a div, just use $("#divId").html(result)
I think that you must use .text or .html in place .value.
look at this example using jquery:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text demo</title>
<style>
p {
color: blue;
margin: 8px;
}
b {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
<script>
var str = $( "p:first" ).text();
$( "p:last" ).html( str );
</script>
</body>
</html>
If you wish to add a result in a div try with:
jQuery("#divID").append("<p>" + data + "<p>");
To update the content of a <div> or <p> element, you would use innerHTML instead of value.
So in your sample code you would update this line:
document.getElementById("parcost").value = parcost;
into this:
document.getElementById("parcost").innerHTML= parcost;
Furthemore, since you are already using jQuery, you can simplify your click function:
$('#calc').click(function(){
var num_participant = parseInt($("#num_participant").val());
var reward = parseInt($("#reward").val());
var esttime = parseInt($("#esttime").val());
var parcost = num_participant*reward;
var popcost = (parcost*0.1)+(num_participant*150);
var totcost = parcost+popcost;
$("#result").css("display", "block");
$("#parcost").html(parcost);
$("#popcost").val(popcost);
$("#totcost").val(totcost);
});

How to prevent duplicates when I append to a list?

I want to modify the below code so that selected_users remains unique after append. That is, let's append a user U to selected_users only if selected_users does not already contain a U.
The below code you can copy and paste and it will work. All dependencies are on cdns.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
div { width : 200px }
.selected { background-color:blue; }
</style>
<script>
$(document).ready(function() {
$("#add").on("click", function() {
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
});
$("#remove").on("click", function() {
var selected_users = $("#selected_users > p");
selected_users.remove();
});
$("p").click(function() {
if( $(this).hasClass("selected") ) {
$(this).removeClass("selected");
}
else {
$(this).addClass("selected");
}
});
});
</script>
</head>
<div id="users">
<p class="1">User 1</p>
<p class="2">User 2</p>
<p class="3">User 3</p>
<p class="4">User 4</p>
<p class="5">User 5</p>
</div>
<div>
<input type="button" value=">>" id="add"/>
<input type="button" value="<<" id="remove"/>
</div>
<div id="selected_users">
</div>
You could do something like this:
$("#add").on("click", function()
{
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
if(!selected_users.find(users).lenght())
{
selected_users.append(users.clone().removeClass("selected"));
}
});
Forms like this commonly remove the item from the source list when adding it to the target list.
This sort of behavior would prevent the need to do the check, as it would be impossible to add the duplicate to your selected_users list.
Your code would look something like this for selecting/deselecting a user:
$("#add").on("click", function() {
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
users.remove();
});
$("#remove").on("click", function() {
var selected_users = $("#selected_users > p");
var users = $("#users");
users.append(selected_users.clone());
selected_users.remove();
});
NOTE: I have not tested the above code.
If you wanted to maintain the order of users in each of your list, you could do a sort on either list when adding to it, or you could maintain the visibility property of each user rather than actually removing/adding them from either list.
Simple solution is to remove form the list on the left hand side.
If you don;t want to do that. Try this. The idea is to assign ids to be able to check.
$("#add").on("click", function() {
var users = $("#users > p.selected");
users.uniqueId();//assigns unique id if they don't have one
//you can do above step somewhere else also for performance reasons
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
users.each(function(user) {
var id = user.attr('id');
var exists = $("#selected_users > [selectedid="+id+"]);
if (! exists || exists.length <= 0 ) {
selected_users.append(
user.removeClass("selected").
removeAttr("id").
attr('selectedid',id));
}
});
});

How do I make an expanding textbox?

I want to make a textbook where it starts out as a given width/height. Then if users type more then the given amount of space, the textbox expands downward. How do I go about doing this? Do I use CSS?
The basic textbox just displays a scroll bar when users pass the number of rows allow. How do I make it so the textbox expands the rows by say 5 more?
<form method="post" action="">
<textarea name="comments" cols="50" rows="5"></textarea><br>
<input type="submit" value="Submit" />
</form>
How do I use the example that Robert Harvey mentioned? I never used JavaScript before..
jQuery AutoResize Plugin
http://james.padolsey.com/javascript/jquery-plugin-autoresize/
Steps to use:
You need jQuery. To add it to your page:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
Then, download the plugin and put it in the same folder as your web page. To reference it, add this to your web page:
<script type="text/javascript"
src="autoresize.jquery.js"></script>
Next, add a textbox to your page:
<textarea id="comment" style="width: 400px; padding: 10px; height: 50px;
display: block; font-family:Sans-serif; font-size:1.2em;">
Type something in here, when you get close to the end the box will expand!
</textarea>
Finally, in a script block, add the code that hooks up the plugin to the textbox:
<script type="text/javascript">
$('textarea#comment').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
</script>
You can add a library if you care to, or just keep track of the textarea's scrollTop property.
If scrollTop is not zero, add your rows.
<!doctype html>
<html lang= "en">
<head>
<meta charset= "utf-8">
<title>Expand textarea </title>
<style>
textarea{overflow-y:scroll}
</style>
<script>
onload=function(){
var who=document.getElementsByName('comments')[0];
who.onkeyup=function(){
if(who.scrollTop)who.rows=parseInt(who.rows)+5;
}
}
</script>
</head>
<body>
<textarea name="comments" cols="50" rows="5"></textarea>
</body>
</html>
Here is my solution using only vanilla javascript.
Tested to work in Chrome, Firefox & IE8 and up.
On load, or whack it in a function:
var element = document.getElementById('comments');
var retractsAutomatically = false;
var sizeOfOne = element.clientHeight;
element.rows = 2;
var sizeOfExtra = element.clientHeight - sizeOfOne;
element.rows = 1;
var resize = function() {
var length = element.scrollHeight;
if (retractsAutomatically) {
if (element.clientHeight == length)
return;
}
else {
element.rows = 1;
length = element.scrollHeight;
}
element.rows = 1 + (length - sizeOfOne) / sizeOfExtra;
};
//modern
if (element.addEventListener)
element.addEventListener('input', resize, false);
//IE8
else {
element.attachEvent('onpropertychange', resize)
retractsAutomaticaly = true;
}
CSS & HTML:
textarea#comments { overflow:hidden; }
<textarea id="comments" cols="50" rows="1"></textarea>

Categories

Resources