<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
var clase = (function() {
var ajax = new XMLHttpRequest();
function autoCompletaPulsacion(elTxtBox) {
var str = elTxtBox.value;
if (str.length <= 2) { // si el valor es menor a 3
return;
}
var uri = elTxtBox.parentNode.getAttribute('action') + '?busca=' + str;
ajax.open('GET', uri, true); // en este caso has de recorgelo la variable "busca" con $_GET[]. aunque se puede enviar por POST o PUT
ajax.onreadystatechange = function() {
if (!ajax || ajax == null) { return; }
if (ajax.readyState == 4) {
if (ajax.status == 200) {
document.getElementById('respuesta').innerHTML = ajax.responseText; // aquí imprimes la respuesta
ajax.onreadystatechange = function(){};
//ajax.abort();
//ajax = null;
}
}
}
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(null);
return;
}
window.onload = function() {
document.getElementById('output').addEventListener ('keyup', function() {autoCompletaPulsacion(this)}, false); // asignamos el evento al textarea
}
})();
</script>
</head>
<body>
<form action="pagina.php" method="post">
<textarea style="resize: vertical;"class="form-control" id="output" name="texto" placeholder="Pega aquí las palabras que quieras contar" cols="30" rows="15"><?php if(isset($_POST['enviar'])) { echo $array_a_string; } ?></textarea>
<button type="submit" name="enviar" class="btn btn-primary" >Contar palabras y caracteres</button>
</form>
<div id="respuesta"></div>
</body>
</html>