TypechoJoeTheme

至尊技术网

统计
登录
用户名
密码
/
注册
用户名
邮箱

[原创]JavaScript实现form提交,回车提交URL地址伪静态,form 回车提交

2025-06-09
/
0 评论
/
5 阅读
/
正在检测是否收录...
06/09

1. HTML 结构

html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>文章生成器</title> </head> <body> <form id="articleForm"> <label for="title">标题:</label> <input type="text" id="title" name="title"><br> <label for="keywords">关键词(用逗号分隔):</label> <input type="text" id="keywords" name="keywords"><br> <label for="description">描述:</label> <textarea id="description" name="description"></textarea><br> <label for="content">正文(约1000字):</label> <textarea id="content" name="content"></textarea><br> <button type="button" id="submitBtn">提交</button> </form> <div id="markdownContent"></div> <script src="generateArticle.js"></script> </body> </html>

2. JavaScript 逻辑(generateArticle.js)

```javascript
document.getElementById('submitBtn').addEventListener('click', function() {
submitForm(); // 调用提交函数
});
document.getElementById('articleForm').addEventListener('keypress', function(event) {
if (event.key === 'Enter' && event.target.id === 'content') { // 检查是否在content文本框内按下了回车键
submitForm(); // 如果是,则提交表单
}
});

function submitForm() {
const title = document.getElementById('title').value;
const keywords = document.getElementById('keywords').value.split(','); // 逗号分隔关键词数组
const description = document.getElementById('description').value;
const content = document.getElementById('content').value; // 约1000字的正文内容
const articleMarkdown = generateMarkdown(title, keywords, description, content); // 生成Markdown格式文章
document.getElementById('markdownContent').innerHTML = articleMarkdown; // 显示Markdown内容到页面上
}

function generateMarkdown(title, keywords, description, content) {
return

朗读
赞(0)
版权属于:

至尊技术网

本文链接:

https://www.zzwws.cn/archives/29174/(转载时请注明本文出处及文章链接)

评论 (0)

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. 强强强
    2025-04-07
  2. jesse
    2025-01-16
  3. sowxkkxwwk
    2024-11-20
  4. zpzscldkea
    2024-11-20
  5. bruvoaaiju
    2024-11-14

标签云