悠悠楠杉
[原创]JavaScript实现form提交,回车提交URL地址伪静态,form 回车提交
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