Подсчет количества символов в текстовом поле через Поле Ajax запрос или JS в форме

[alcompstudio]

Добрый день!

Нужно сделать подсчет количества символов (пока без учета пробелов и HTML тегов) в открытой форме "на лету" в поле с текстовым редактором и полученный подсчет передать в другое числовое поле в этой же форме (можно во время "печатания" текста чтобы число символов уже отображалось в числовом поле)

Пробовал как поле Ajax запрос код:

Код: Выделить всё

$str=[2386];
$str = preg_replace('/[^A-Za-z]/','',$str);
echo strlen($str);

и такой код

Код: Выделить всё

$characters = '<script>$("#fields_2386").on("keyup paste", function(){$("#fields_2386").val().replace(/(<([^>]+)>)/ig,"").length;});</script>';

echo '<script>$("#fields_2378").val(' . $characters . ')</script>';

а также код в блоке JS самой формы http://joxi.ru/5mdV5MMtaJXBRA

Код: Выделить всё

$(document).ready(function() {
            $("#fields_2386").on('keyup paste', function(){

            var Characters = $("#fields_2386").val().replace(/(<([^>]+)>)/ig,"").length;
              
              $("#fields_2378").val(Characters);

            $("#counter").text("Осталось символов: " + (1500 - Characters));

        });
    });

--- где 2386 - текстовое поле с редактором, 2378 - числовое поле.

Но что-то не получается, не силен в кодах, может кто-то подскажет что не так написал, или уже кто-то реализовывал подобное?

[Develop-Soft]

Так можт?:

Код: Выделить всё

function lengthHTML(html){
    var p = document.createElement("p");
    p.innerHTML = html;
    return p.innerText.length;
    p = null;
} 

//..

alert(lengthHTML('<h1>Привет мир!</h1>')); // = 11

..подсчет количества символов (пока без учета пробелов..

Странно... Чем пробел не символ..?

[alcompstudio]

Так можт?:

Код: Выделить всё

function lengthHTML(html){
    var p = document.createElement("p");
    p.innerHTML = html;
    return p.innerText.length;
    p = null;
} 

//..

alert(lengthHTML('<h1>Привет мир!</h1>')); // = 11

..подсчет количества символов (пока без учета пробелов..

Странно... Чем пробел не символ..?

Спасибо, немного не понял код, я не спец в JS, но попробую .

По поводу пробела - есть учет символов без пробелов, есть с пробелами. В моем конкретном случае нужно без пробелов. Это специфика учета в копирайтинге.

[alcompstudio]

Вопрос, может быть разработчику - а JS точно работает в форме ввода?? Я уже много вариантов попробовал, уже на сторонних сервисах пробовал - работают, а тут не получается, не работают мои коды... Может есть какой-то особый код? ))

[support]

Ну значит не судьба:)

[alcompstudio]

В общем, методом тыка узнал, что проблема в CKEditor, не знаю как получить значения из него... Даже простой перенос из одного поля в другое - работает, например, такой код

Код: Выделить всё

$("#fields_2386").keyup(function(){
 var input1 = parseInt($("#fields_2386").val());
 if(!isNaN(input1)){
     $("#fields_2378").val(input1);
 }
 else{
     $("#fields_2378").val("");
     alert("Please enter a valid number");
 }
});

переносит значение из одного поля (2386) в другое (2378) в форме в режиме ввода данных (в поле 2386). Оба поля - Числовые (но в принципе работает и с полями ввода). Этот код работает в форме.

А если 2386 - будет именно CKEditor, то не могу даже просто даные из него перенести (даже если цифру ввожу, она не переносится в поле 2378).

Как быть, может есть подсказка? Как получить нужную информацию из редактора текста? А мне еще и подсчитать нужно символы))

[alcompstudio]

Ну значит не судьба:)

прикольный ответ

[Develop-Soft]

Вот, что-то рабочее накидал для Ajax-запроса (в меру скудных знаний js):

Код: Выделить всё

echo '<script>function lengthHTML(html,max_length){ var p = document.createElement("p"); p.innerHTML = html; return max_length-p.innerText.length; p = null; }; editor = document.getElementById("fields_230_rendered_value").childNodes[1].childNodes[1].childNodes[1].childNodes[1].contentDocument.body; editor.onkeyup = function(){ document.getElementById("fields_229_rendered_value").innerHTML = "<b>Осталось символов: " + lengthHTML(editor.innerHTML,1500)+ "</b>"; } </script>';

Допилить самостоятельно...

[alcompstudio]

Вот, что-то рабочее накидал для Ajax-запроса (в меру скудных знаний js):

Код: Выделить всё

echo '<script>function lengthHTML(html,max_length){ var p = document.createElement("p"); p.innerHTML = html; return max_length-p.innerText.length; p = null; }; editor = document.getElementById("fields_230_rendered_value").childNodes[1].childNodes[1].childNodes[1].childNodes[1].contentDocument.body; editor.onkeyup = function(){ document.getElementById("fields_229_rendered_value").innerHTML = "<b>Осталось символов: " + lengthHTML(editor.innerHTML,1500)+ "</b>"; } </script>';

Допилить самостоятельно...

Ух-ты интересно, спасибо, протестирую! )

[alcompstudio]

Код: Выделить всё

fields_229_rendered_value

- вот это что за элемент? И подскажете, как поместить посчитанное значение в числовое поле/поле ввода? Ну т.е. чтобы так примерно работало: https://jsfiddle.net/hjsoakmb/2/

-----

UPD, что-то у меня не получается с кодом... не выводит даже как у вас на гифке показано