input只能输入域名

要实现input只能输入域名的限制，需结合前端验证技术（如正则表达式、键盘事件拦截）和HTML5属性，同时考虑域名规范（RFC标准）。以下是具体方案和扩展知识：

一、实现方案

1. HTML5原生验证（基础防护层）

使用<input pattern>属性配合正则表达式：

<input 
  type="text" 
  pattern="^([a-zA-Z0-9]+(-[a-zA-Z0-9]+)*\.)+[a-zA-Z]{2,}$" 
  title="请输入有效域名（如example.com）"
>

2. JavaScript增强验证（交互层防护）

document.querySelector('input').addEventListener('input', function(e) {
  this.value = this.value
    .replace(/[^\w.-]/g, '')  // 仅允许字母数字、连字符、点
    .replace(/^\.+|\.+$/g, '') // 禁止首尾出现点
    .replace(/\.{2,}/g, '.')  // 禁止连续多个点
});

二、域名格式技术标准

三、验证正则表达式详解

完整域名验证正则（支持国际化域名IDN）：

^(?:https?:\/\/)?  # 可选协议头
(?:(?:[a-z0-9]|[^\x00-\x7F])  # ASCII或Unicode字符
(?:-(?!-)|[a-z0-9]|[^\x00-\x7F]){0,61})?
(?:\.[a-z0-9](?:-(?!-)|[a-z0-9]|[^\x00-\x7F]){0,61})+
\.?[a-z]{2,}(?:\.\w{2,})?$

四、扩展辅助功能

自动补全优化：

<datalist id="tld-suggestions">
  <option>.com</option>
  <option>.net</option>
  <option>.org</option>
  <option>.io</option>
</datalist>

五、重要注意事项

建议结合IANA根域名数据库实现TLD实时验证。完整方案需包括客户端即时反馈 + 服务端二次验证的双重保障机制。