JavaScript编程
Completion requirements
许多用户熟悉在网页上填写表单并点击“提交”按钮的过程。JavaScript 可以通过至少两种方式改善这个过程:
- 数据验证:JavaScript 可以在数据发送到服务器之前进行检查,确保数据的有效性。
- 数据预验证:JavaScript 可以在用户填写表单时实时验证数据,捕捉常见错误,并提供即时改进建议,这样用户在点击“提交”按钮之前就能纠正问题。
- 预渲染文本:JavaScript 可以将文本区域中输入的内容预渲染在页面的另一个区域,这样用户可以在点击“预览”按钮之前,看到内容是如何渲染和格式化的。[1][2][3]
- 实时字数统计:JavaScript 可以实时统计用户在文本区域中输入的单词或字符数。[4][5][6][7]
有时,网站会进行“在线”计算,涉及少量数据,并将结果返回给用户。在这种情况下,JavaScript 可以拦截“提交”按钮的点击事件,在浏览器中本地完成整个计算。这样,用户几乎可以立即看到结果,而无需等待输入的数据发送到服务器、等待服务器处理数据并返回结果。
相关信息:
许多人建议确保所有内容对残障人士以及关闭 JavaScript 的用户可访问。一种实现方式是先使用标准的 HTML 表单,再添加不干扰用户的 JavaScript 代码,以改善启用 JavaScript 用户的体验。无论是否所有 JavaScript 都能成功执行,系统都应优雅降级,确保所有内容(如有必要,验证用户数据)仍然可用。
进一步阅读
- JavaScript/Working With Files 提到 HTML 表单的一种用途。
- HyperText Markup Language/Forms 解释了如何编写不使用 JavaScript 的“普通”表单。
参考文献
- “如何在 div 中显示文本区域的 HTML 内容,而不是文本?”
- Andrey Fedoseev. “jQuery 插件,向文本区域添加实时预览面板,类似 StackOverflow 编辑界面”
- Guillaume DE LA RUE. “JS 中的 Markdown 实时编辑器”
- Sacha Schmid. JavaScript 字数统计
- Drew Schrauf. “有效的 JavaScript 字数统计”
- “任何给定 DOM 元素的 JavaScript 字数统计”
- Jake Rocheleau. “使用 CSS3 和 jQuery 构建实时文本区域字符数限制”
Last modified: Monday, 13 January 2025, 2:56 AM