当前位置：首页 > HTML

h5 实现填空

2026-03-06 14:35:10HTML

使用HTML5和JavaScript实现填空功能

在HTML5中实现填空功能可以通过表单元素结合JavaScript来完成。以下是几种常见的方法：

方法一：使用input元素实现单行填空

<form id="fillBlankForm">
  <label for="blank1">填空1：</label>
  <input type="text" id="blank1" name="blank1" placeholder="请输入答案">

  <button type="button" onclick="checkAnswers()">提交答案</button>
</form>

<script>
function checkAnswers() {
  const answer = document.getElementById('blank1').value;
  if(answer === '正确答案') {
    alert('回答正确！');
  } else {
    alert('回答错误，请再试一次');
  }
}
</script>

方法二：使用textarea实现多行填空

<div class="question">
  <p>请填空：______是中国的首都。</p>
  <textarea id="capitalAnswer" rows="2" cols="30"></textarea>
  <button onclick="validateCapital()">检查</button>
</div>

<script>
function validateCapital() {
  const userAnswer = document.getElementById('capitalAnswer').value.trim();
  if(userAnswer.toLowerCase() === '北京') {
    alert('正确！');
  } else {
    alert('不正确，正确答案是"北京"');
  }
}
</script>

方法三：使用contenteditable属性实现富文本填空

<div class="passage" contenteditable="false">
  中国的首都是<span class="blank" contenteditable="true"></span>，最大的城市是<span class="blank" contenteditable="true"></span>。
</div>

<button onclick="checkBlanks()">检查答案</button>

<script>
function checkBlanks() {
  const blanks = document.querySelectorAll('.blank');
  const answers = ['北京', '上海'];

  blanks.forEach((blank, index) => {
    if(blank.textContent === answers[index]) {
      blank.style.backgroundColor = 'lightgreen';
    } else {
      blank.style.backgroundColor = 'pink';
    }
  });
}
</script>

方法四：使用Canvas实现填空游戏

<canvas id="fillCanvas" width="500" height="200"></canvas>
<input type="text" id="canvasInput">
<button onclick="drawAnswer()">填入</button>

<script>
const canvas = document.getElementById('fillCanvas');
const ctx = canvas.getContext('2d');

// 绘制题目
ctx.font = '20px Arial';
ctx.fillText('2 + 2 = ____', 50, 50);

function drawAnswer() {
  const answer = document.getElementById('canvasInput').value;
  ctx.clearRect(150, 30, 100, 30); // 清除原有内容
  ctx.fillText(answer, 150, 50);

  if(answer === '4') {
    ctx.fillStyle = 'green';
    ctx.fillText('✓', 200, 50);
  }
}
</script>

方法五：使用SVG实现填空

<svg width="300" height="100">
  <text x="10" y="30" font-family="Arial" font-size="16">水的化学式是H
    <tspan fill="none" stroke="black" stroke-width="1">____</tspan>O
  </text>
  <foreignObject x="80" y="10" width="40" height="30">
    <input type="text" id="chemistryAnswer" style="width:40px;height:20px;">
  </foreignObject>
</svg>

<button onclick="checkChemistry()">检查</button>

<script>
function checkChemistry() {
  const answer = document.getElementById('chemistryAnswer').value;
  if(answer === '2') {
    alert('正确！');
  }
}
</script>

增强用户体验的技巧

为填空功能添加自动聚焦和回车提交功能可以提升用户体验：

h5 实现填空

<input type="text" id="autoFocusBlank" placeholder="自动聚焦的填空" autofocus>

<script>
document.getElementById('autoFocusBlank').addEventListener('keypress', function(e) {
  if(e.key === 'Enter') {
    alert('你输入了: ' + this.value);
  }
});
</script>

以上方法可以根据具体需求选择使用，简单填空使用input或textarea即可，复杂场景可以考虑contenteditable或Canvas/SVG方案。

分享给朋友：