HTML5仅接受数字和字符

Question

我需要用户仅输入数字（0-9）和字符（a-zA-z）

<input type="text" pattern="^[a-zA-Z0-9]+$" />

我尝试了上述操作，但是它接受:@,#$%^&*)!之类的特殊字符，并且两者之间没有空格

我在寻找什么

Ex: Test123, 123John,

Answer 1

它需要包裹在<form>

中

<form>
    <input type="text" pattern="^[a-zA-Z0-9]+$" />
</form>

Answer 2

尝试一下：

<div class="wrapper">
  <div class="side">
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <img src="http://via.placeholder.com/350x150" />
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet felis vitae nulla efficitur mattis. Nulla cursus lectus ut libero molestie, in elementum dolor faucibus. Vivamus pretium pulvinar maximus. Quisque erat nunc, aliquet at eros id,
    ultricies placerat dui. Nullam pellentesque euismod ligula, non viverra quam ullamcorper vel. Ut feugiat est ut felis consequat tempus. Aenean molestie mauris eget turpis tincidunt, a dictum orci malesuada. Maecenas semper interdum nulla, quis gravida
    quam accumsan nec. Nunc gravida, eros in cursus vehicula, erat dolor porttitor tellus, ac congue felis ante non metus.
  </div>
</div>