I need to modify this script so that at the end of the allowed number of characters, instead of alert user can see a modal warning window, which disappears after N seconds. In this case, the cursor should freeze in place and further typing is impossible. Thanks in advance for your advice.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Textbox</title>
<script type="text/javascript" src="/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 145);
var count= 145 - box.length;
if(box.length <= 145)
{
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
else
{
alert(' Stop! ');
}
return false;
});
});
</script>
<style>
#barbox
{
float:right!;
height:14px;
background-color:#FFFFFF;
width:100px;
border:solid 2px #000;
margin-right:3px;
margin-bottom:10px;
overflow: inherit;
}
#bar
{
background-color:#ff0000;
width:0px;
height:14px;
}
#count
{
float:right; margin-right:8px;
font-family:'Georgia', Times New Roman, Times, serif;
font-size:16px;
font-weight:bold;
color:#333;
}
#contentbox
{
width:450px; height:50px;
border:solid 2px #006699;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
</style>
</head>
<body>
<div>
<div id="count">145</div>
<div id="barbox"><div id="bar"></div></div>
</div>
<textarea id="contentbox"></textarea>
</body>
</html>
I need to modify this script so that at the end of the allowed number of characters, instead of alert user can see a modal warning window, which disappears after N seconds. In this case, the cursor should freeze in place and further typing is impossible. Thanks in advance for your advice.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Textbox</title>
<script type="text/javascript" src="http://ajax.googleapis./
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 145);
var count= 145 - box.length;
if(box.length <= 145)
{
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
else
{
alert(' Stop! ');
}
return false;
});
});
</script>
<style>
#barbox
{
float:right!;
height:14px;
background-color:#FFFFFF;
width:100px;
border:solid 2px #000;
margin-right:3px;
margin-bottom:10px;
overflow: inherit;
}
#bar
{
background-color:#ff0000;
width:0px;
height:14px;
}
#count
{
float:right; margin-right:8px;
font-family:'Georgia', Times New Roman, Times, serif;
font-size:16px;
font-weight:bold;
color:#333;
}
#contentbox
{
width:450px; height:50px;
border:solid 2px #006699;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
</style>
</head>
<body>
<div>
<div id="count">145</div>
<div id="barbox"><div id="bar"></div></div>
</div>
<textarea id="contentbox"></textarea>
</body>
</html>
-
. . } else { alert(' Stop! '); $("#contentbox").attr("disabled", "true"); }...– B. Bilgin Commented Jul 13, 2012 at 21:16
1 Answer
Reset to default 2You could use the jQuery library to create a modal dialog: http://jqueryui./demos/dialog/#modal
Here's an example using your code: http://jsfiddle/ZZsTS/
JS
$( "#dialog-modal" ).dialog({
height: 140,
modal: true,
autoOpen: false,
//set a timeout of 3 secs to close it again, when opened
open: function(event, ui) {
setTimeout("$('#dialog-modal').dialog('close')", 3000);
},
//when closing, make the textarea readonly
close : function(){
$('textarea').attr('readonly', 'readonly');
}
});
open dialog with
$('#dialog-modal').dialog('open');
HTML
<textarea></textarea>
<div id="dialog-modal" title="Basic modal dialog">
<p>Stop !</p>
</div>