Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Focusing: focus/blur#314

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
dolgachio merged 5 commits intojavascript-tutorial:masterfrommalechaneit:focus-blur
Mar 26, 2022
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,13 +9,13 @@
<body>

<ul>
<li>Click the divto edit.</li>
<li>Enteror blur saves the result.</li>
<li>Клікніть на divщоб відредагувати.</li>
<li>НатисканняEnterабо втрата фокусу збереже вміст поля введення.</li>
</ul>

HTMLis allowed.
HTMLдозволено.

<div id="view" class="view">Text</div>
<div id="view" class="view">Текст</div>

<script>
let area = null;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,12 +14,12 @@
}

.edit {
/*replace paddingwith border (still3pxnot to shift the contents) */
/*замінити paddingна border (3pxщоб не зміщувати вміст) */
border: 3px solid blue;
padding: 0px;
}

.edit:focus {
/*remove focus border in Safari */
/*позбутися рамки при фокусуванні в Safari */
outline: none;
}
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,18 +9,18 @@
<body>

<ul>
<li>Click the divto edit.</li>
<li>Enteror blur saves the result.</li>
<li>Клікніть на divщоб відредагувати.</li>
<li>НатисканняEnterабо втрата фокусу збереже вміст поля введення.</li>
</ul>

HTMLis allowed.
HTMLдозволено.

<div id="view" class="view">Text</div>
<div id="view" class="view">Текст</div>

<script>
// ...your code...
//Note:<textarea>should have class="edit"
// my.csshas styles to make it the same size asdiv
// ...ваш код...
//Зауважте: елемент<textarea>повинен мати class="edit"
//вmy.cssє стилі, які зроблять його такого ж розміру як іdiv
</script>

</body>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,12 +14,12 @@
}

.edit {
/*replace paddingwith border (still3pxnot to shift the contents) */
/*замінити paddingна border (3pxщоб не зміщувати вміст) */
border: 3px solid blue;
padding: 0px;
}

.edit:focus {
/*remove focus border in Safari */
/*позбутися рамки при фокусуванні в Safari */
outline: none;
}
8 changes: 4 additions & 4 deletions2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,12 +2,12 @@ importance: 5

---

#Editablediv
# div, який можна відредагувати

Create a`<div>` that turns into`<textarea>` when clicked.
Створіть`<div>`, який при кліканні на ньому, перетворюється на`<textarea>`.

The textarea allows to edit theHTMLin the `<div>`.
Текстова область дозволяє редагуватиHTMLвсередині `<div>`.

When the user presses`key:Enter`or it loses focus, the`<textarea>`turns back into`<div>`,and its content becomes HTMLin `<div>`.
Коли користувач натискає`key:Enter`або`<textarea>`втрачає фокус, тоді знову з’являється`<div>`,який містить в собі HTMLвведений в `<textarea>`.

[demo src="solution"]
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@

1.On click --replace `innerHTML`of the cell by`<textarea>`with same sizes and no border. Can use JavaScript orCSSto set the right size.
2.Set`textarea.value`to `td.innerHTML`.
3.Focus on the textarea.
4.Show buttons OK/CANCEL under the cell, handle clicks on them.
1.По кліку --замінити `innerHTML`клітини на`<textarea>`того ж розміру, без рамки. Задати розміри можна як вCSSтак і в JavaScript.
2.Взяти значення`textarea.value`з `td.innerHTML`.
3.Встановити фокус в текстову область.
4.Показати кнопки ЗГОДА/ВІДМІНА під клітиною, опрацювати кліки на них.
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
/*common styles for the table, no need to modify these */
/*загальні стилі для таблиці, немає потреби редагувати */

th {
text-align: center;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,61 +10,61 @@
<link rel="stylesheet" href="my.css">


<p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
<p>Клікніть на клітину щоб відредагувати. Натисніть ЗГОДА або ВІДМІНА щоб завершити.</p>

<table id="bagua-table">
<tr>
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
<th colspan="3">Таблиця<em>Bagua</em>: Напрям, Елемент, Колір, Значення</th>
</tr>
<tr>
<td class="nw"><strong>Northwest</strong>
<br>Metal
<br>Silver
<br>Elders
<td class="nw"><strong>Північний захід</strong>
<br>Метал
<br>Срібло
<br>Старійшини
</td>
<td class="n"><strong>North</strong>
<br>Water
<br>Blue
<br>Change
<td class="n"><strong>Північ</strong>
<br>Вода
<br>Синій
<br>Зміни
</td>
<td class="ne"><strong>Northeast</strong>
<br>Earth
<br>Yellow
<br>Direction
<td class="ne"><strong>Північний схід</strong>
<br>Земля
<br>Жовтий
<br>Напрям
</td>
</tr>
<tr>
<td class="w"><strong>West</strong>
<br>Metal
<br>Gold
<br>Youth
<td class="w"><strong>Захід</strong>
<br>Метал
<br>Золото
<br>Молодість
</td>
<td class="c"><strong>Center</strong>
<br>All
<br>Purple
<br>Harmony
<td class="c"><strong>Центр</strong>
<br>Все
<br>Багряний
<br>Гармонія
</td>
<td class="e"><strong>East</strong>
<br>Wood
<br>Blue
<br>Future
<td class="e"><strong>Схід</strong>
<br>Дерево
<br>Синій
<br>Майбутнє
</td>
</tr>
<tr>
<td class="sw"><strong>Southwest</strong>
<br>Earth
<br>Brown
<br>Tranquility
<td class="sw"><strong>Південний захід</strong>
<br>Земля
<br>Коричневий
<br>Спокій
</td>
<td class="s"><strong>South</strong>
<br>Fire
<br>Orange
<br>Fame
<td class="s"><strong>Південь</strong>
<br>Вогонь
<br>Помаранчевий
<br>Слава
</td>
<td class="se"><strong>Southeast</strong>
<br>Wood
<br>Green
<br>Romance
<td class="se"><strong>Південний схід</strong>
<br>Дерево
<br>Зелений
<br>Роман
</td>
</tr>

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,13 +4,13 @@
padding: 0;
display: block;

/*remove resizing handle in Firefox */
/*заборонити змінювати розмір в Firefox */
resize: none;

/*remove outline on focus in Chrome */
/*позбутися рамки при фокусуванні в Chrome */
outline: none;

/*remove scrollbar in IE */
/*позбутися прокрутки в IE */
overflow: auto;
}

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,7 @@ let editingTd;

table.onclick = function(event) {

// 3possible targets
// 3можливі цілі
let target = event.target.closest('.edit-cancel,.edit-ok,td');

if (!table.contains(target)) return;
Expand All@@ -14,7 +14,7 @@ table.onclick = function(event) {
} else if (target.className == 'edit-ok') {
finishTdEdit(editingTd.elem, true);
} else if (target.nodeName == 'TD') {
if (editingTd) return; //already editing
if (editingTd) return; //вже редагується

makeTdEditable(target);
}
Expand All@@ -27,7 +27,7 @@ function makeTdEditable(td) {
data: td.innerHTML
};

td.classList.add('edit-td'); // tdis in edit state, CSSalso styles the area inside
td.classList.add('edit-td'); // tdв режимі редагування, CSSтакож стилізує область всередині

let textArea = document.createElement('textarea');
textArea.style.width = td.clientWidth + 'px';
Expand All@@ -40,7 +40,7 @@ function makeTdEditable(td) {
textArea.focus();

td.insertAdjacentHTML("beforeEnd",
'<div class="edit-controls"><button class="edit-ok">OK</button><button class="edit-cancel">CANCEL</button></div>'
'<div class="edit-controls"><button class="edit-ok">ЗГОДА</button><button class="edit-cancel">ВІДМІНА</button></div>'
);
}

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
/*common styles for the table, no need to modify these */
/*загальні стилі для таблиці, немає потреби редагувати */

th {
text-align: center;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,61 +10,61 @@
<link rel="stylesheet" href="my.css">


<p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
<p>Клікніть на клітину щоб відредагувати. Натисніть ЗГОДА або ВІДМІНА щоб завершити.</p>

<table id="bagua-table">
<tr>
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
<th colspan="3">Таблиця<em>Bagua</em>: Напрям, Елемент, Колір, Значення</th>
</tr>
<tr>
<td class="nw"><strong>Northwest</strong>
<br>Metal
<br>Silver
<br>Elders
<td class="nw"><strong>Північний захід</strong>
<br>Метал
<br>Срібло
<br>Старійшини
</td>
<td class="n"><strong>North</strong>
<br>Water
<br>Blue
<br>Change
<td class="n"><strong>Північ</strong>
<br>Вода
<br>Синій
<br>Зміни
</td>
<td class="ne"><strong>Northeast</strong>
<br>Earth
<br>Yellow
<br>Direction
<td class="ne"><strong>Північний схід</strong>
<br>Земля
<br>Жовтий
<br>Напрям
</td>
</tr>
<tr>
<td class="w"><strong>West</strong>
<br>Metal
<br>Gold
<br>Youth
<td class="w"><strong>Захід</strong>
<br>Метал
<br>Золото
<br>Молодість
</td>
<td class="c"><strong>Center</strong>
<br>All
<br>Purple
<br>Harmony
<td class="c"><strong>Центр</strong>
<br>Все
<br>Багряний
<br>Гармонія
</td>
<td class="e"><strong>East</strong>
<br>Wood
<br>Blue
<br>Future
<td class="e"><strong>Схід</strong>
<br>Дерево
<br>Синій
<br>Майбутнє
</td>
</tr>
<tr>
<td class="sw"><strong>Southwest</strong>
<br>Earth
<br>Brown
<br>Tranquility
<td class="sw"><strong>Південний захід</strong>
<br>Земля
<br>Коричневий
<br>Спокій
</td>
<td class="s"><strong>South</strong>
<br>Fire
<br>Orange
<br>Fame
<td class="s"><strong>Південь</strong>
<br>Вогонь
<br>Помаранчевий
<br>Слава
</td>
<td class="se"><strong>Southeast</strong>
<br>Wood
<br>Green
<br>Romance
<td class="se"><strong>Південний схід</strong>
<br>Дерево
<br>Зелений
<br>Роман
</td>
</tr>

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
/*your styles */
/*ваші стилі */
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
let table = document.getElementById('bagua-table');

/*your code */
/*ваш код */
14 changes: 7 additions & 7 deletions2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,15 +2,15 @@ importance: 5

---

#Edit TDon click
#Редагувати TDпо кліку

Make table cells editable on click.
Створіть таблицю, клітини якої можна було б редагувати клікнувши на них.

-On click --the cell should become "editable" (textarea appears inside), we can change HTML.There should be no resize, all geometry should remain the same.
-Buttons OK and CANCEL appear below the cell to finish/cancel the editing.
-Only one cell may be editable at a moment. While a`<td>`is in "edit mode",clicks on other cells are ignored.
-The table may have many cells. Use event delegation.
-По кліку --в клітині з’являється `<textarea>`, в якій можна редагувати вміст в форматі HTML.Висота та ширина клітини при цьому не змінюється.
-Кнопки ЗГОДА та ВІДМІНА з’являються внизу клітини щоб підтвердити/відмінити зміни.
-Одночасно можна редагувати лише одну клітину. Поки`<td>`в "режимі редагування",кліки на інших клітинах ігноруються.
-В талиці може бути багато клітин. Використовуйте делегування подій.

The demo:
Демо:

[iframe src="solution" height=400]
Loading
[8]ページ先頭
©2009-2025 Movatter.jp