js实现填空
实现填空功能的JavaScript方法
DOM操作与事件监听
通过JavaScript操作DOM元素实现填空功能。选择目标元素并监听用户输入事件，动态更新填空内容。
document.getElementById('blankInput').addEventListener('input', function(e) {
document.getElementById('blankSpace').textContent = e.target.value;
});模板字符串动态渲染
使用ES6模板字符串动态生成填空内容，适合需要批量处理的场景。
const fillBlank = (text, answer) => {
return text.replace('___', `<span class="answer">${answer}</span>`);
};正则表达式匹配替换
处理复杂填空模式时，使用正则表达式进行模式匹配和替换。
const text = "The capital of France is ___";
const answer = "Paris";
const result = text.replace(/_{3}/, answer);表单验证与提交
实现带验证的填空表单提交功能，确保用户输入符合要求。
document.forms['quizForm'].addEventListener('submit', function(e) {
e.preventDefault();
const userAnswer = document.getElementById('userAnswer').value.trim();
if (!userAnswer) alert('请填写答案');
});动态创建填空区域
通过JavaScript动态创建填空交互界面。
function createBlankQuestion(questionText) {
const container = document.createElement('div');
container.innerHTML = `
<p>${questionText.replace('___', '<input type="text">')}</p>
<button class="check-answer">检查答案</button>
`;
document.body.appendChild(container);
}本地存储答案
将用户填空答案保存到localStorage实现持久化存储。
function saveAnswer(questionId, answer) {
localStorage.setItem(`blank_${questionId}`, answer);
}填空游戏示例
实现一个简单的填空游戏逻辑。
const questions = [
{ text: "2 + 2 = ___", answer: "4" },
{ text: "The square root of 9 is ___", answer: "3" }
];
let currentQuestion = 0;
function displayQuestion() {
document.getElementById('question').textContent = questions[currentQuestion].text;
}Canvas绘制填空
使用Canvas API实现图形化填空效果。
const canvas = document.getElementById('blankCanvas');
const ctx = canvas.getContext('2d');
ctx.fillText('答案: _____', 10, 50);填空动画效果
为填空操作添加视觉反馈动画。
document.querySelectorAll('.blank').forEach(blank => {
blank.addEventListener('focus', () => {
blank.style.transform = 'scale(1.05)';
});
});注意事项
- 处理用户输入时考虑XSS防护
- 移动端需要特别处理虚拟键盘问题
- 复杂填空场景建议使用专业库如React/Vue
- 无障碍访问需确保填空区域有适当ARIA标签
