powered by simpleCommunicator - 2.0.41     © 2025 Programmizd 02
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Автозамена с помощью Javascript
2 сообщений из 2, страница 1 из 1
Автозамена с помощью Javascript
    #40116376
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
здравствуйте, на одном ресурсе нашёл тему по своему вопросу, хотел увидеть как это сделано с помощью Javascript
но выложенный пример с пояснениями:
Теперь в меню скрипта появился пункт "Редактировать список автозамены". При выборе этого меню появляется окошко, в котором можно редактировать список, экспортировать список в файл, импортировать список из файла. При редактировании, новые записи отображаются на сером фоне, это несохраненные записи. При экспорте они не будут сохранены и в файл тоже. Сначала надо нажать кнопку "Сохранить". При удалении записей никаких диалогов не будет, записи просто удаляются и все. Но, если что-то удалено случайно, то можно не сохранять изменения, закрыть диалог, а после нового открытия, несохраненные изменения не появятся. При импорте записей из файла, не будут импортированы записи, ключи которых уже существуют, чтобы не было случайной перезаписи. Если надо что-то перезаписать, то сначала надо удалить существующую запись. Проверки на повторы не делал, так что, если есть записи с повторяющимися ключами, то при сохранении дубликаты будут утеряны кроме последнего.


Когда в текстовом поле написано слово из списка ключей автозамены, ему должен предшествовать пробел или новая строка, нажимаем Ctrl Space и ключ заменяется значением. Кроме того на сочетании клавиш Shift Alt + быстрое добавление записи в список. То есть, если нужно добавить какой-то текст в список, нужно его выделить в текстовом поле, нажать упомянутое сочетание клавиш и в появившемся диалоге указать ключ для этого текста.
не смог опробовать как он будет в html? не понимаю что такое "`;" - 4 раза встречается
спасибо, потом видимо будут вопросы))
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
// ==UserScript==
// @name Autochange
// @namespace diadiavova
// @match *://*/*
// @grant GM_registerMenuCommand
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_addStyle
 
// ==/UserScript==
 
 
// Автозамена
 
(function ()
{
    GM_addStyle(".newItem td{border: 1px solid red; background-color: lightgray;}")
    let autochangeList = GM_getValue("autochangeList");
    autochangeList = autochangeList ? JSON.parse(autochangeList) : {};
    let objectData = autochangeList;
    GM_registerMenuCommand("Редактировать список автозмамены", function ()
    {
        let dialog = document.createElement("div");
        dialog.id = "active_buttons_editor";
        document.body.appendChild(dialog);
        dialog.innerHTML = `
 
<div style="overflow-y: scroll; height: 90%;background-color:white;">
<div><input type="file"/><span>Импорт списка</span></div>
<div><a data-id="listExport">Экспорт списка</a></div>
<table border="1">
<thead><th></th><th>Слово</th><th>Текст автозамены</th></thead>
<tbody>
</tbody>
</table>
</div>
<div><button data-id="save">Сохранить</button>
<button data-id="addNew">Добавить</button>
<button data-id="closeDialog">Закрыть</button></div>
`;
        dialog.style.cssText = `
position: fixed;
left: 25%;
top: 20%;
width: 50%;
height: 60%;
background-color:black;
padding: 5px;
`;
 
      function addRows(obj, newItem = false){
        let table = dialog.querySelector("tbody");
        for (let ac in obj)
        {
            let row = table.insertRow();
            if(newItem)row.classList.add("newItem");
            row.innerHTML = `<td><button class="deleteRow">x</button></td><td contenteditable="true">${ac}</td><td contenteditable="true">${obj[ac]}</td>`;
        }        
      }
      let listExport = dialog.querySelector("[data-id='listExport']");
      listExport.download = "autochange.json";
      function setHref(){
        if(listExport.href){URL.revokeObjectURL(listExport.href)}
        let blob = new Blob([JSON.stringify(autochangeList)], {type:"octet/stream"});
        let url = URL.createObjectURL(blob)
        listExport.href = url;
      }
      setHref();
      let fileInput = dialog.querySelector("input[type='file']");
      fileInput.onchange = function ()
            {
              fetch(url).then(async function (data)
              {
                let implist = JSON.parse(await data.text());
                let keys = Object.keys(implist).filter(k => !(k in autochangeList));
                let newObj = {};
                for(let key of keys)
                {
                  newObj[key] = implist[key];
                }
                addRows(newObj, true);
              });
            }
        const save = function (evt)
        {
            let rows = evt.target.parentElement.parentElement.querySelectorAll('tbody>tr');
            let achl = {}
            for (let row of rows)
            {
                if (!([...row.cells].slice(1).some(c => c.textContent == '')))
                {
                    achl[row.cells[1].textContent] = row.cells[2].textContent;
                }
            }
            GM_setValue('autochangeList', JSON.stringify(achl));
            autochangeList = achl;
          [...dialog.querySelectorAll(".newItem")].forEach(r=>r.classList.remove("newItem"));
          setHref(); 
        };
        const addNew = function (evt)
        {
          addRows({"newKey": "newValue"}, true);
            //let table = evt.target.parentElement.parentElement.querySelector('tbody');
            //let row = table.insertRow();
            //row.innerHTML = `<td><button class="deleteRow">x</button></td><td contenteditable='true'></td><td contenteditable='true'></td>`;
        };
        const closeDialog = function ()
        {
          document.body.removeChild(document.getElementById('active_buttons_editor'));
          URL.revokeObjectURL(url);
        };
 
        const deleteRow = function (evt)
        {
            let btn = evt.target;
            if (btn.className == "deleteRow")
            {
                let row = evt.target.closest("tr");
                row.parentElement.removeChild(row);
            }
 
        };
      
        dialog.querySelector("[data-id='save']").onclick = save;
        dialog.querySelector("[data-id='addNew']").onclick = addNew;
        dialog.querySelector("[data-id='closeDialog']").onclick = closeDialog;
        dialog.addEventListener("click", deleteRow);
        addRows(autochangeList);
    });
 
    const addRecord = function (txt)
    {
        let key = prompt(`Введите короткий текст, который будет заменяться на:
 
${txt}`, "newKey");
        if (key == null) return;
        if (key in autochangeList && !confirm(`Ключ "${key}" уже существует со значением
    "${autochangeList[key]}"
    
    Хотите его перезаписать?`)) { return; }
        else
        {
            autochangeList[key] = txt;
            GM_setValue("autochangeList", JSON.stringify(autochangeList));
        }
    };
 
    let shortcutKey = {
        alt: false,
        ctrl: true,
        shift: false,
        charcode: 32
    };
 
    // Alt Shift +
    let addRecordShortcut = {
        alt: true,
        ctrl: false,
        shift: true,
        charcode: 61
    };
 
    function testShortcut(shortcut, eventObject)
    {
        return eventObject.altKey == shortcut.alt &&
            eventObject.ctrlKey == shortcut.ctrl &&
            eventObject.shiftKey == shortcut.shift &&
            eventObject.keyCode == shortcut.charcode;
    }
 
    function changeText(textarea, dataObj)
    {
        var words = textarea.value.substring(0, textarea.selectionStart).split(/\s+/);
        var lastword = words[words.length - 1].toLowerCase();
        if (dataObj[lastword])
        {
            var startSelection = textarea.selectionStart - lastword.length;
            var changeText = dataObj[lastword];
            var newselpos = startSelection + changeText.length;
            var textbefore = textarea.value.substr(0, startSelection);
            var textafter = textarea.value.substring(textarea.selectionStart);
            textarea.value = textbefore + dataObj[lastword] + textafter;
            textarea.selectionStart = textarea.selectionEnd = newselpos;
        }
    }
 
    function addKeePressHandler()
    {
        var textareas = document.getElementsByTagName("textarea");
 
        document.body.addEventListener("keyup", function (evt)
        {
            if ((evt.target.tagName == "TEXTAREA" || (evt.target.tagName == "INPUT" && evt.target.type == "text")))
            {
                if (testShortcut(shortcutKey, evt))
                {
                    evt.stopPropagation();
                    evt.preventDefault();
                    changeText(evt.target, autochangeList);
                }
                else if (testShortcut(addRecordShortcut, evt))
                {
                    evt.stopPropagation();
                    evt.preventDefault();
                    let txt = evt.target.value.substring(evt.target.selectionStart, evt.target.selectionEnd);
                    addRecord(txt);
                }
            }
        }, false);
    }
    addKeePressHandler();
})();
...
Рейтинг: 0 / 0
Автозамена с помощью Javascript
    #40116378
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
катастрофа
не понимаю что такое "`;" - 4 раза встречается

Я писал уже Вам
voraa
катастрофа,

Потому, что надо просто сесть и изучать javascript, если уж беретесь что то на нем изображать.
Просто взять в сети какой-нибудь учебник по современному javascript и читать, читать, читать....
На выбор
https://www.w3schools.com/js/default.asp
https://learn.javascript.ru/ (аж даже по-русски)

Ну форум, на мой взгляд, не то место, где ведут уроки по javascript.
Не объяснение каких то сложных запутанных мест, а просто уроки.
Ну не на форуме рассказывать, что такое массивы, строки.... Какие они бывают....
Ну просто взять учебник и прочитать про то, как в javascript задается строка. Это же основы, азы...
Это все равно, как лезть в алгебру, не зная арифметики.
...
Рейтинг: 0 / 0
2 сообщений из 2, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Автозамена с помощью Javascript
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]