[界面功能] 请教关于实现输入假名 判断对错的功能的思路

[banxiu]

感谢分享，请问如何能实现输入假名，判断对错的功能的思路，看了有卡片输入的翻转功能，在现有的笔记功能上如何添加？能否提供个思路？

[5mdld]

你好，大致思路是：

1. 在正面新增一个带拼写检查框的 {{type:kana:VocabFurigana}}
2. 删除掉背面现有的 {{kana:VocabFurigana}}
3. 给拼写检查框设置一个CSS样式。

实现效果：

CleanShot.2026-01-31.at.00.41.51.mp4

可以参考下面的图片和代码（CSS部分是AI生成的，你可以根据实际情况进行调整）

1. 在正面模板图示处增加：

  <section class="Answer">
    {{type:VocabFurigana}}
  </section>

2. 删除背面模板图示的部分

3. 在样式区增加拼写检查框的样式：

/* --- Type Answer 输入框样式 --- */
input#typeans {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  background-color: var(--canvas-inset);
  color: var(--fg);
  font-family: inherit; /* 继承卡片字体 */
  font-size: var(--text-2xl); /* 保持和原本假名一致的大小 */
  padding: 8px 12px;
  margin: 0;
  outline: none;
  transition: all 0.2s ease;
}

/* 输入框选中时的高亮 */
input#typeans:focus {
  border-color: var(--button-primary-bg);
  background-color: var(--canvas-elevated);
  box-shadow: 0 0 0 2px var(--button-primary-gradient-start);
}

/* 修正背面比对结果的样式，防止字体突变 */
code#typeans {
  font-family: inherit;
  font-size: var(--text-2xl);
  padding: 4px 0;
  display: block; /* 确保结果也独占一行 */
}