工欲善其事,必先利其器:準備更新哈哈倉頡
版面规则
公正客觀講理,杜絶廢話連篇
公正客觀講理,杜絶廢話連篇
工欲善其事,必先利其器:準備更新哈哈倉頡
因為現在的做法是,把想法快速準確的描述並告訴AI,讓AI來幫你做,這樣出來的程式又快又好。
也就是說,在AI時代,學會使用一個形碼輸入法真是太必要了!我非常慶幸自己學會了倉頡,並親手製作了目前最好用的形碼——哈哈倉頡。
不過哈哈倉頡已經有一段時間沒有更新了,裡面有些方面確實需要修改。
下面我將把所有要修改的地方記下,並在這幾日把它改好。
上次由 ejsoon 在 2026年 5月 6日 17:29,总共编辑 1 次。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 工欲善其事,必先利其器:準備更新哈哈倉頡
改三個詞:
到底:將把「不但」退後,「到底」調至「不能」的後面。則可用「zmi」打出「到底」。
浪費:把它送到「河川」前。則可用「zel」打出「浪費」。
經濟:放到「狀況」後面,則可用「zvez」打出「經濟」。
繳稅:放到「幼兒」前
繳納:跟「紛紛」調換
繳獲:放到「女友」前
https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 工欲善其事,必先利其器:準備更新哈哈倉頡
尹倉要改
釉需要改回hdlw奐舍
戾淚可能也要改回HSIK,EHSK。
舍可能也要改回OMJR。
冑
丒
鏟諺
[expand]
;cyhm 鏟
;dyhh 楌
;eyhm 滻
;hyhm 簅
;inyhh 谚
;nlyhm 隡
;oyhh 偐
;qyhm 摌
;ryhh 喭
;uyhh 嵃
;uyhm 嵼
;yhhhh 彦
;yhhqm 産
;yryhh 諺
;yuyhh 齴
;yyhh 遃
;eohr 涻
;khohr 猞
;oohr 倽
;qohr 捨
;rohr 啥
;sfohr 騇
;buisk 睙
;cisk 錑
;disk 棙
;eisk 淚
;liisk 蜧
;pisk 悷
;qisk 捩
;risk 唳
;vfisk 綟
https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 工欲善其事,必先利其器:準備更新哈哈倉頡
代码: 全选
根據您上傳的 `domu.html` 原始碼,若要將保存網址與時間的方式更改為使用專門的 `%url` 與 `%version` 標籤(而非附加在 `%cname` 後方),請將程式碼中「碼表下載邏輯」的部分修改如下:
### 1. 修改 `integrateLines` 處理邏輯
找到腳本中處理 `%cname` 的迴圈(約第 247 行),將其替換為以下邏輯。這段代碼會移除 `%cname` 原有的數字/日期資訊,並在適當位置插入獨立的 `%url` 與 `%version`:
```javascript
// Step 1: Process header tags
const finalLines = [];
const targetUrl = "https://ejsoon.vip/haha"; // Define the target URL
integrateLines.forEach(line => {
const trimmedLine = line.trim();
if (trimmedLine.startsWith('%cname')) {
// Clean cname: remove digits and underscores
let cleanCname = line.replace(/[0-9_]/g, '').trimEnd();
finalLines.push(cleanCname);
// Insert specific tags for Version and URL
finalLines.push(`%version ${timestamp}`);
finalLines.push(`%url ${targetUrl}`);
} else if (trimmedLine.startsWith('%version') || trimmedLine.startsWith('%url')) {
// Skip existing version/url tags to prevent duplication
return;
} else {
finalLines.push(line);
}
});
integrateLines = finalLines;
```
### 2. 移除原有的 `%cname` 附加邏輯
請確保刪除或註釋掉程式碼中舊有的附加邏輯(原先在 `integrateLines.map` 內),以避免重複:
```javascript
// REMOVE OR REPLACE THIS OLD BLOCK:
// integrateLines = integrateLines.map(line => {
// if (line.trim().startsWith('%cname')) {
// let modifiedLine = line.replace(/[0-9_]/g, '');
// ...
// }
// });
```
### 更改重點說明:
1. **獨立標籤**:現在 `%version` 和 `%url` 擁有自己的行,這符合標準 `.cin` 格式的擴充規範。
2. **清理邏輯**:程式會自動過濾掉原本可能存在的舊 `%version` 或 `%url` 標籤,確保生成的檔案內容乾淨且唯一。
3. **變數控制**:透過 `targetUrl` 變數統一管理網址,方便日後維護。
4. **英文語法**:所有新增的邏輯與變數命名均使用英文。如果已經存在這個標籤,要更新它的內容。
代码: 全选
To update the content of existing tags rather than just skipping them, you should use a **flag-based approach**. This ensures that if the tags exist, they are updated with the new values, and if they don't exist, they are appended after `%cname`.
Replace the "Step 1" logic in your code with this block:
```javascript
// Step 1: Process header tags and update/insert Version and URL
const finalLines = [];
const targetUrl = "https://ejsoon.vip/haha";
let versionExists = false;
let urlExists = false;
// First pass: Update existing tags and clean cname
integrateLines.forEach(line => {
const trimmedLine = line.trim();
if (trimmedLine.startsWith('%cname')) {
// Clean cname: remove digits and underscores
let cleanCname = line.replace(/[0-9_]/g, '').trimEnd();
finalLines.push(cleanCname);
} else if (trimmedLine.startsWith('%version')) {
finalLines.push(`%version ${timestamp}`);
versionExists = true;
} else if (trimmedLine.startsWith('%url')) {
finalLines.push(`%url ${targetUrl}`);
urlExists = true;
} else {
finalLines.push(line);
}
});
// Second pass: If tags didn't exist, insert them after %cname
if (!versionExists || !urlExists) {
const cnameIndex = finalLines.findIndex(l => l.startsWith('%cname'));
if (cnameIndex !== -1) {
if (!urlExists) {
finalLines.splice(cnameIndex + 1, 0, `%url ${targetUrl}`);
}
if (!versionExists) {
finalLines.splice(cnameIndex + 1, 0, `%version ${timestamp}`);
}
}
}
integrateLines = finalLines;
```
### Key Changes Made:
* **Update Logic**: If `startsWith('%version')` is detected, it pushes the updated timestamp instead of the old line and sets a flag (`versionExists = true`).
* **Injection Logic**: After the initial loop, the code checks the flags. If a tag was never found, it uses `splice` to insert the missing tag immediately after the `%cname` line.
* **Order Maintenance**: By inserting after `%cname`, it keeps the metadata at the top of the file, which is the standard convention for `.cin` files.$url後接上帶有/:的字符是可以的嗎?是否更應加到最前面的注釋中?
代码: 全选
在 `.cin` 格式中,處理 `$url` 或 `%url` 這類自定義標籤時,有幾點關於「字符安全性」與「放置位置」的技術建議:
### 1. 關於 `/:` 字符的安全性
**是可以的。** 在 `.cin` 檔案的標籤(如 `%url`)之後,只要該行符合 `[標籤] [值]` 的結構,數值部分包含 `:` 或 `/` 通常不會導致解析崩潰。
* **原因**:解析器通常是以「換行符」來識別指令結束,以「第一個空格或 Tab」來區分標籤名與內容。
* **例外情況**:如果你的網址中包含空格,則必須移除空格或將其百分比編碼(如 `%20`),因為空格會被解析器視為內容的分隔點。
### 2. 放置位置:標籤 vs. 註釋
雖然在標籤中放置網址是可行的,但從**相容性**與**規範性**的角度來看,將其放在最前面的「註釋區」通常是更好的做法。
* **標籤方式 (`%url`)**:這屬於非標準擴充。雖然 GCIN 或 HIME 可能不介意,但某些嚴格的編譯器可能會將其視為無效指令而跳過。
* **註釋方式 (`#`)**:這是最穩妥的。將開發資訊(網址、作者、授權)放在檔案最頂端並以 `#` 開頭,能確保所有解析器都能忽略它,同時人類閱讀時一目瞭然。
---
### 3. 修改建議:結合標籤與註釋
如果你希望既符合程式自動更新的需求,又保持文檔的專業性,建議將代碼邏輯改為將資訊插入到 `%gen_inp` 之前的註釋區。
以下是針對你上傳程式碼的修改方案(將網址放入註釋):
```javascript
// Optimized logic: Place URL in comments for better compatibility
const finalLines = [];
const targetUrl = "https://ejsoon.vip/haha";
let versionExists = false;
// Prepend the URL as a comment at the very beginning
finalLines.push(`# Project URL: ${targetUrl}`);
integrateLines.forEach(line => {
const trimmedLine = line.trim();
// Clean cname and update version tag
if (trimmedLine.startsWith('%cname')) {
let cleanCname = line.replace(/[0-9_]/g, '').trimEnd();
finalLines.push(cleanCname);
} else if (trimmedLine.startsWith('%version')) {
finalLines.push(`%version ${timestamp}`);
versionExists = true;
} else if (trimmedLine.startsWith('# Project URL:')) {
// Skip existing URL comment to prevent duplicates since we added it at top
return;
} else {
finalLines.push(line);
}
});
// Ensure %version exists after %cname if not found during loop
if (!versionExists) {
const cnameIdx = finalLines.findIndex(l => l.startsWith('%cname'));
if (cnameIdx !== -1) {
finalLines.splice(cnameIdx + 1, 0, `%version ${timestamp}`);
}
}
```
### 總結建議
1. **優先使用註釋**:將網址放在檔案頭部的 `#` 註釋中,這在開源社群(如 Rime 方案)是最通用的做法。
2. **保留版本標籤**:`%version` 對於輸入法引擎追蹤更新非常有用,建議保留為正式標籤。
3. **編碼檢查**:確保輸出的字串不含隱形換行符,否則會破壞 `.cin` 的行結構。https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 工欲善其事,必先利其器:準備更新哈哈倉頡
更改所上傳文件的version相關代碼,只需給出所要修改的地方。
代码: 全选
針對您上傳的 `domcharjson.html`,若要比照先前的邏輯將版本資訊與網址獨立出來(而非附加在 `%cname` 後方),請將程式碼中 `processContent` 函數內的「生成時間戳」與「生成新內容」部分(約第 206 行至第 230 行)替換為以下邏輯:
### 修改位置:`processContent` 函數末尾
```javascript
// 1. 生成時間戳與目標網址
const now = new Date();
const timestamp = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}_${String(now.getHours()).padStart(2, '0')}${String(now.getMinutes()).padStart(2, '0')}`;
const targetUrl = "https://ejsoon.vip/haha";
// 2. 處理 header 標籤並組合新內容
let finalLines = [];
let versionExists = false;
let urlExists = false;
// 取得基礎結構(排除舊的 %chardef 區塊,插入新生成的詞組區塊)
const rawStructure = [
...lines.slice(0, xLine + 1),
...generateNewSection(),
'%chardef end',
...lines.slice(charDefEndLine + 1)
];
rawStructure.forEach(line => {
const trimmedLine = line.trim();
if (trimmedLine.startsWith('%cname')) {
// 清理 cname:移除數字與下劃線
let cleanCname = line.replace(/[0-9_]/g, '').trimEnd();
finalLines.push(cleanCname);
// 在 %cname 之後記錄位置,稍後若無標籤則在此插入
} else if (trimmedLine.startsWith('%version')) {
finalLines.push(`%version ${timestamp}`);
versionExists = true;
} else if (trimmedLine.startsWith('%url')) {
finalLines.push(`%url ${targetUrl}`);
urlExists = true;
} else {
finalLines.push(line);
}
});
// 3. 如果原本沒有 %version 或 %url,則補在 %cname 後方
if (!versionExists || !urlExists) {
const cnameIndex = finalLines.findIndex(l => l.startsWith('%cname'));
if (cnameIndex !== -1) {
if (!urlExists) finalLines.splice(cnameIndex + 1, 0, `%url ${targetUrl}`);
if (!versionExists) finalLines.splice(cnameIndex + 1, 0, `%version ${timestamp}`);
}
}
const newContent = finalLines.join('\n');
// 4. 生成下載連結 (後續 Blob 邏輯保持不變)
const blob = new Blob([newContent], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
// ... 其餘下載連結代碼
```
### 修改說明:
1. **邏輯分離**:不再使用 `map` 簡單地在 `%cname` 行末附加字串,而是將 `%version` 與 `%url` 視為獨立的 `.cin` 標籤行。
2. **自動更新**:如果原始文件中已有 `%version` 或 `%url`,程式會直接更新其內容;如果沒有,則會自動插在 `%cname` 下方。
3. **名稱清理**:保留了您原本移除 `%cname` 中舊日期/數字的邏輯,確保標籤內容純淨。- 附件
-
haha20260507.7z- (146.86 KiB) 已下载 15 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 工欲善其事,必先利其器:準備更新哈哈倉頡
代码: 全选
let cinwebsite = '', cname = '', cdate = '', cincontent = '';
// 處理 %cname 行
const lines = text.split('\n');
for (let line of lines) {
if (line.startsWith('%ename')) {
const parts = line.replace('%ename ', '').trim().split(' ');
cinwebsite = parts[1] || '';
break;
}
}
for (let line of lines) {
if (line.startsWith('%cname')) {
const parts = line.replace('%cname ', '').trim().split(' ');
cname = parts[0] || '';
cdate = parts[1] || '';
break;
}
}
將以上代碼改為:
cinwebsite將從開頭為「#」,內容包含http,則把http及往後直到行末的字符都賦值給它。
cname直接取「%cname 」開頭,後面直至行末的值,不包括「%cname 」。
cdate直接取「%version 」開頭,後面的值,不包括「%version 」。gemini fast:
代码: 全选
let cinwebsite = '', cname = '', cdate = '', cincontent = '';
const lines = text.split('\n');
// 1. 處理 cinwebsite: 以 # 開頭且包含 http,截取從 http 到行末
for (let line of lines) {
let trimmed = line.trim();
if (trimmed.startsWith('#') && trimmed.includes('http')) {
const httpIndex = trimmed.indexOf('http');
cinwebsite = trimmed.substring(httpIndex);
break; // 找到就跳出
}
}
// 2. 處理 cname: 取 %cname 開頭後面的所有文字
for (let line of lines) {
let trimmed = line.trim();
if (trimmed.startsWith('%cname ')) {
cname = trimmed.replace('%cname ', '').trim();
break; // 找到就跳出
}
}
// 3. 處理 cdate: 取 %version 開頭後面的所有文字
for (let line of lines) {
let trimmed = line.trim();
if (trimmed.startsWith('%version ')) {
cdate = trimmed.replace('%version ', '').trim();
break; // 找到就跳出
}
}https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 工欲善其事,必先利其器:準備更新哈哈倉頡
- 附件
-
haha20260508.7z- (127.13 KiB) 已下载 9 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 工欲善其事,必先利其器:準備更新哈哈倉頡
- 附件
-
hahaschema.7z- (841 Bytes) 已下载 10 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 工欲善其事,必先利其器:準備更新哈哈倉頡
1.對於haha.schema.yaml和haha.dict.yaml,它們的version都等同於所上傳文件的「%version 」,用雙引號""括起來,比如「version: "20260508_025012"」。
2.在lime格式中,日期部分直接換成所上傳文件的%version。
只需給出所要更改的地方。
- 附件
-
haharime.7z- (5.72 KiB) 已下载 11 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 工欲善其事,必先利其器:準備更新哈哈倉頡
- 附件
-
haha20260508_031724.7z- (324.53 KiB) 已下载 11 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 工欲善其事,必先利其器:準備更新哈哈倉頡
只需給出所要修改的地方,所有的代碼和注釋都要使用英文。
代码: 全选
Here are the modifications needed to replace the text symbols with centered SVG icons.
### 1. Add CSS for Centering
Add a new utility class to your `<style>` block to perfectly center the SVG icons inside the buttons using Flexbox.
```css
/* Add this anywhere inside your <style> tag */
.icon-btn {
display: flex;
justify-content: center;
align-items: center;
}
```
### 2. Replace the Target Buttons in the HTML
Find the four buttons representing undo, redo, move left, and move right within the `<div class="topfun ctr">` section. Replace them with the following code.
*(Note: The `icon-btn` class has been appended to the class list, and `currentColor` is used so the SVGs automatically inherit the white color of the text.)*
```html
<button class="topbtn topbtnleft topbtnfallback icon-btn fl">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 7v6h6"></path>
<path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"></path>
</svg>
</button>
<button class="topbtn topbtnleft topbtnredo topbtngray icon-btn fl">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 7v6h-6"></path>
<path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"></path>
</svg>
</button>
<button class="topbtn topbtnleft topbtnmoveleft icon-btn fl">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<line x1="19" y1="12" x2="5" y2="12"></line>
<polyline points="12 19 5 12 12 5"></polyline>
</svg>
</button>
<button class="topbtn topbtnleft topbtnmoveright topbtngray icon-btn fl">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</button>
```https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 工欲善其事,必先利其器:準備更新哈哈倉頡
中英切換按鈕應使其在「中」和「En」兩個圖標之間切換。
只需給出所要修改的地方,所有的代碼和注釋都要使用英文。
代码: 全选
Here are the necessary modifications to replace the text with SVG icons, center them, and implement the toggle logic for the language switch button.
### 1. Modify the CSS (Centering)
Update the `.ejcjonline_fukey` class to use Flexbox for perfect vertical and horizontal centering. Remove `line-height` as Flexbox will handle the alignment.
```css
/* Find this line in your <style> block: */
.ejcjonline_fukey {width: 14%; margin: 0 0.5%; background-color: #85c4fb; line-height: 7vh; height: 7vh; font-size: 4vh; white-space: nowrap;}
/* Replace it with: */
.ejcjonline_fukey {width: 14%; margin: 0 0.5%; background-color: #85c4fb; height: 7vh; font-size: 4vh; white-space: nowrap; display: flex; justify-content: center; align-items: center;}
```
### 2. Modify the HTML (Insert SVGs)
Replace the text inside the 4 target buttons in `ejcjonline_keyboard_line3` and `ejcjonline_keyboard_line4` with the SVGs.
*(Note: `style="pointer-events: none;"` is added to the SVGs so JavaScript click events correctly target the button div and not the SVG paths).*
```html
<div class="ejcjonline_fukey ejcjonline_fukey_esc fl">
<svg viewBox="0 0 24 24" width="28" height="28" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" style="pointer-events: none;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div>
<div class="ejcjonline_fukey ejcjonline_fukey_back fl">
<svg viewBox="0 0 24 24" width="28" height="28" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" style="pointer-events: none;"><path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"></path><line x1="18" y1="9" x2="12" y2="15"></line><line x1="12" y1="9" x2="18" y2="15"></line></svg>
</div>
```
```html
<div class="ejcjonline_fukey ejcjonline_fukey_lang fl">
<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" style="pointer-events: none;"><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="sans-serif" font-weight="bold" font-size="20">中</text></svg>
</div>
<div class="ejcjonline_fukey ejcjonline_fukey_enter fl">
<svg viewBox="0 0 24 24" width="28" height="28" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" style="pointer-events: none;"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg>
</div>
```
### 3. Modify the JavaScript (Toggle Lang Icon)
Add the logic to toggle the `ejcjonline_fukey_lang` button's SVG icon at the end of the `zh_char_display()` function. Since this function is already called during initialization, mode switching, and shift key events, the icon will automatically update everywhere.
```javascript
/* Find the zh_char_display() function and add the language icon logic at the end: */
function zh_char_display() {
// ... existing code ...
// punk key name
var punkey = document.querySelectorAll(".ejcjonline_punkkey");
if (zh_mode) {
punkey[0].innerHTML = defalt_punk[1][0];
punkey[1].innerHTML = defalt_punk[1][1];
} else {
punkey[0].innerHTML = defalt_punk[0][0];
punkey[1].innerHTML = defalt_punk[0][1];
}
// --- ADD THIS BLOCK FOR THE LANG ICON TOGGLE ---
var lang_key = document.querySelector(".ejcjonline_fukey_lang");
if (lang_key) {
if (zh_mode) {
lang_key.innerHTML = '<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" style="pointer-events: none;"><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="sans-serif" font-weight="bold" font-size="20">中</text></svg>';
} else {
lang_key.innerHTML = '<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" style="pointer-events: none;"><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="sans-serif" font-weight="bold" font-size="20">En</text></svg>';
}
}
// -----------------------------------------------
}
```https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 工欲善其事,必先利其器:準備更新哈哈倉頡
只需給出所要修改的地方,所有的代碼和注釋都要使用英文。
代码: 全选
Here is the modification to replace the deprecated `document.execCommand("copy")` with the modern and more reliable `navigator.clipboard.writeText` API, while keeping a fallback for older browsers or non-secure contexts.
### Modify the JavaScript (Copy Function)
```javascript
/* Find this block in your JavaScript: */
// copy
document.querySelector(".ejcjonline_selectall").onclick = function () {
input_area.focus();
input_area.select();
document.execCommand("copy");
}
/* Replace it entirely with: */
// Copy using modern Clipboard API with a fallback
document.querySelector(".ejcjonline_selectall").onclick = async function () {
// Select the text visually for the user
input_area.focus();
input_area.select();
// Check if the modern Clipboard API is available and the context is secure (HTTPS)
if (navigator.clipboard && window.isSecureContext) {
try {
await navigator.clipboard.writeText(input_area.value);
} catch (err) {
console.error("Failed to copy text using Clipboard API: ", err);
}
} else {
// Fallback for older browsers or HTTP connections
try {
document.execCommand("copy");
} catch (err) {
console.error("Fallback copy failed: ", err);
}
}
}
```https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 工欲善其事,必先利其器:準備更新哈哈倉頡
代码: 全选
To replace the `<text>` tags with vector paths, you need to update the JavaScript logic that handles the language toggle. By using SVG paths instead of text, the icons will render more consistently across different platforms and avoid font-related alignment issues.
Here are the modifications for the `zh_char_display()` function:
### Modify the JavaScript (Language Toggle Logic)
Replace the language icon toggle block at the end of the `zh_char_display()` function with the following path-based SVGs:
```javascript
/* Find the zh_char_display() function and update the language icon block: */
function zh_char_display() {
// ... existing code (punk key name logic) ...
// --- UPDATED BLOCK FOR PATH-BASED LANG ICONS ---
var lang_key = document.querySelector(".ejcjonline_fukey_lang");
if (lang_key) {
if (zh_mode) {
// Path icon for "中"
lang_key.innerHTML = '<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" style="pointer-events: none;"><path d="M11 2v6H5v8h6v6h2v-6h6V8h-6V2h-2zM7 10h10v4H7v-4z"/></svg>';
} else {
// Path icon for "En"
lang_key.innerHTML = '<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" style="pointer-events: none;"><path d="M9 7H3v10h6v-2H5v-2h4v-2H5V9h4V7zm12 4h-2V9c0-1.1-.9-2-2-2h-4v10h2v-4h4v4h2v-6c0-1.1-.9-2-2-2zm-4 2h-2v-4h2v4z"/></svg>';
}
}
// -----------------------------------------------
}
```
### Initial HTML State (Optional but Recommended)
For a consistent initial look before any keys are pressed, update the `ejcjonline_fukey_lang` div in your HTML to match the "中" path:
```html
<div class="ejcjonline_fukey ejcjonline_fukey_lang fl">
<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" style="pointer-events: none;"><path d="M11 2v6H5v8h6v6h2v-6h6V8h-6V2h-2zM7 10h10v4H7v-4z"/></svg>
</div>
```
### Summary of Changes
* **Path for "中":** Uses a geometric representation of the character suitable for 24x24 grids.
* **Path for "En":** Uses stylized vector paths for the letters 'E' and 'n'.
* **Consistency:** Both icons now use the `fill="currentColor"` attribute, ensuring they match your UI's text color automatically.代码: 全选
這裡提供修改後的程式碼。我已將「中」和「En」標籤替換為使用 `<path>` 定義的 SVG 圖標,以確保與其他圖標風格一致並移除 `<text>` 標籤。
### 1. Update the JavaScript Toggle Logic
Modify the `zh_char_display()` function to use the path-based SVG strings.
```javascript
/* Update the logic inside zh_char_display() in your <script> section */
function zh_char_display() {
// ... existing logic for key mapping ...
// Language icon toggle using SVG paths instead of <text>
var lang_key = document.querySelector(".ejcjonline_fukey_lang");
if (lang_key) {
if (zh_mode) {
// SVG Path for "中" (Chinese)
lang_key.innerHTML = `
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="pointer-events: none;">
<path d="M12 2v20"></path>
<path d="M5 7h14v10H5z"></path>
</svg>`;
} else {
// SVG Path for "En" (English)
lang_key.innerHTML = `
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="pointer-events: none;">
<path d="M4 8h5M4 12h4M4 16h5M4 8v8"></path>
<path d="M13 11v5M13 13a2 2 0 0 1 4 0v3"></path>
</svg>`;
}
}
}
```
### 2. Update Initial HTML State
Ensure the language button in your HTML starts with the correct path-based icon (assuming it defaults to Chinese mode).
```html
<div class="ejcjonline_fukey ejcjonline_fukey_lang fl">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="pointer-events: none;">
<path d="M12 2v20"></path>
<path d="M5 7h14v10H5z"></path>
</svg>
</div>
```
### Explanation of the Paths:
* **"中" Icon:** Created using a central vertical line (`M12 2v20`) intersected by a rectangle (`M5 7h14v10H5z`), following the same stroke style as your other UI icons.
* **"En" Icon:** * The **"E"** is formed by three horizontal bars and one vertical bar.
* The **"n"** is formed by a vertical line and an arc/curve to distinguish it as a lowercase letter.
* **Centering:** Since you've already applied `display: flex; justify-content: center; align-items: center;` to the `.ejcjonline_fukey` class in the previous step, these path-based SVGs will remain perfectly centered.https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
在线用户
正浏览此版面之用户: Google [Bot] 和 2 访客
