The enterkeyhint Attribute

The `enterkeyhint` Attribute

Global Attribute

The enterkeyhint attribute customizes the label and icon of the Enter key on virtual keyboards (mobile devices). It provides visual context for what action will be performed when the user presses Enter, improving the mobile user experience.

Syntax

<element enterkeyhint="value">Content</element>

Values

Value	Label	Icon	Use Case
`enter`	Enter / Return	↵	Default, new line
`done`	Done	✓	Complete task/form
`go`	Go	→	Navigate/submit
`next`	Next	→	Move to next field
`previous`	Previous	←	Move to previous field
`search`	Search	🔍	Perform search
`send`	Send	↗	Send message/email

Examples

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 20px;
  }
  .search-container {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 500px;
    width: 100%;
    text-align: center;
  }
  .search-icon {
    font-size: 48px;
    margin-bottom: 20px;
  }
  h2 {
    margin: 0 0 10px;
    color: #1e293b;
  }
  p {
    color: #64748b;
    margin: 0 0 30px;
  }
  .search-box {
    position: relative;
  }
  input {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.2s;
  }
  input:focus {
    outline: none;
    border-color: #667eea;
  }
  .hint {
    background: #dbeafe;
    padding: 12px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 14px;
    color: #1e40af;
  }
</style>
</head>
<body>
<div class="search-container">
  <div class="search-icon">🔍</div>
  <h2>Search Products</h2>
  <p>Find what you're looking for</p>

  <div class="search-box">
    <input
      type="search"
      placeholder="Type to search..."
      enterkeyhint="search"
      autocomplete="off">
  </div>

  <div class="hint">
    📱 On mobile: The Enter key shows "Search" icon
  </div>
</div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 20px;
  }
  .search-container {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 500px;
    width: 100%;
    text-align: center;
  }
  .search-icon {
    font-size: 48px;
    margin-bottom: 20px;
  }
  h2 {
    margin: 0 0 10px;
    color: #1e293b;
  }
  p {
    color: #64748b;
    margin: 0 0 30px;
  }
  .search-box {
    position: relative;
  }
  input {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.2s;
  }
  input:focus {
    outline: none;
    border-color: #667eea;
  }
  .hint {
    background: #dbeafe;
    padding: 12px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 14px;
    color: #1e40af;
  }
</style>
</head>
<body>
<div class="search-container">
  <div class="search-icon">🔍</div>
  <h2>Search Products</h2>
  <p>Find what you're looking for</p>

  <div class="search-box">
    <input
      type="search"
      placeholder="Type to search..."
      enterkeyhint="search"
      autocomplete="off">
  </div>

  <div class="hint">
    📱 On mobile: The Enter key shows "Search" icon
  </div>
</div>
</body>
</html>

Multi-Step Form

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body {
    font-family: Arial, sans-serif;
    background: #f8fafc;
    padding: 20px;
  }
  .form-container {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  .form-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px 20px;
    text-align: center;
  }
  .form-header h2 {
    margin: 0 0 10px;
  }
  .progress {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
  }
  .progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transition: background 0.3s;
  }
  .progress-dot.active {
    background: white;
  }
  .form-body {
    padding: 30px;
  }
  .form-step {
    display: none;
  }
  .form-step.active {
    display: block;
  }
  .form-field {
    margin-bottom: 20px;
  }
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #1e293b;
  }
  input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
  }
  input:focus {
    outline: none;
    border-color: #667eea;
  }
  .hint {
    background: #f1f5f9;
    padding: 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #64748b;
    margin-top: 10px;
  }
  .button-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }
  button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
  }
  .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }
  .btn-secondary {
    background: #e2e8f0;
    color: #1e293b;
  }
  button:hover {
    transform: translateY(-2px);
  }
</style>
</head>
<body>
<div class="form-container">
  <div class="form-header">
    <h2>Account Setup</h2>
    <p>Let's get you started</p>
    <div class="progress">
      <div class="progress-dot active"></div>
      <div class="progress-dot"></div>
      <div class="progress-dot"></div>
    </div>
  </div>

  <div class="form-body">
    <!-- Step 1 -->
    <div class="form-step active" data-step="1">
      <div class="form-field">
        <label for="email">Email Address</label>
        <input
          type="email"
          id="email"
          placeholder="your@email.com"
          enterkeyhint="next"
          autocapitalize="none">
        <div class="hint">
          📱 Enter key shows "Next" →
        </div>
      </div>

      <div class="form-field">
        <label for="username">Username</label>
        <input
          type="text"
          id="username"
          placeholder="Choose a username"
          enterkeyhint="next"
          autocapitalize="none">
      </div>

      <div class="button-group">
        <button class="btn-primary" onclick="nextStep()">Next Step</button>
      </div>
    </div>

    <!-- Step 2 -->
    <div class="form-step" data-step="2">
      <div class="form-field">
        <label for="firstName">First Name</label>
        <input
          type="text"
          id="firstName"
          placeholder="John"
          enterkeyhint="next"
          autocapitalize="words">
      </div>

      <div class="form-field">
        <label for="lastName">Last Name</label>
        <input
          type="text"
          id="lastName"
          placeholder="Smith"
          enterkeyhint="next"
          autocapitalize="words">
      </div>

      <div class="button-group">
        <button class="btn-secondary" onclick="previousStep()">Previous</button>
        <button class="btn-primary" onclick="nextStep()">Next Step</button>
      </div>
    </div>

    <!-- Step 3 -->
    <div class="form-step" data-step="3">
      <div class="form-field">
        <label for="company">Company (Optional)</label>
        <input
          type="text"
          id="company"
          placeholder="Acme Corporation"
          enterkeyhint="done"
          autocapitalize="words">
        <div class="hint">
          📱 Enter key shows "Done" ✓
        </div>
      </div>

      <div class="button-group">
        <button class="btn-secondary" onclick="previousStep()">Previous</button>
        <button class="btn-primary" onclick="alert('Form submitted!')">Complete</button>
      </div>
    </div>
  </div>
</div>

<script>
  let currentStep = 1;

  function nextStep() {
    if (currentStep < 3) {
      currentStep++;
      updateSteps();
    }
  }

  function previousStep() {
    if (currentStep > 1) {
      currentStep--;
      updateSteps();
    }
  }

  function updateSteps() {
    // Hide all steps
    document.querySelectorAll('.form-step').forEach(step => {
      step.classList.remove('active');
    });

    // Show current step
    document.querySelector(`[data-step="${currentStep}"]`).classList.add('active');

    // Update progress dots
    document.querySelectorAll('.progress-dot').forEach((dot, index) => {
      if (index < currentStep) {
        dot.classList.add('active');
      } else {
        dot.classList.remove('active');
      }
    });
  }
</script>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body {
    font-family: Arial, sans-serif;
    background: #f8fafc;
    padding: 20px;
  }
  .form-container {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  .form-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px 20px;
    text-align: center;
  }
  .form-header h2 {
    margin: 0 0 10px;
  }
  .progress {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
  }
  .progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transition: background 0.3s;
  }
  .progress-dot.active {
    background: white;
  }
  .form-body {
    padding: 30px;
  }
  .form-step {
    display: none;
  }
  .form-step.active {
    display: block;
  }
  .form-field {
    margin-bottom: 20px;
  }
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #1e293b;
  }
  input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
  }
  input:focus {
    outline: none;
    border-color: #667eea;
  }
  .hint {
    background: #f1f5f9;
    padding: 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #64748b;
    margin-top: 10px;
  }
  .button-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }
  button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
  }
  .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }
  .btn-secondary {
    background: #e2e8f0;
    color: #1e293b;
  }
  button:hover {
    transform: translateY(-2px);
  }
</style>
</head>
<body>
<div class="form-container">
  <div class="form-header">
    <h2>Account Setup</h2>
    <p>Let's get you started</p>
    <div class="progress">
      <div class="progress-dot active"></div>
      <div class="progress-dot"></div>
      <div class="progress-dot"></div>
    </div>
  </div>

  <div class="form-body">
    <!-- Step 1 -->
    <div class="form-step active" data-step="1">
      <div class="form-field">
        <label for="email">Email Address</label>
        <input
          type="email"
          id="email"
          placeholder="your@email.com"
          enterkeyhint="next"
          autocapitalize="none">
        <div class="hint">
          📱 Enter key shows "Next" →
        </div>
      </div>

      <div class="form-field">
        <label for="username">Username</label>
        <input
          type="text"
          id="username"
          placeholder="Choose a username"
          enterkeyhint="next"
          autocapitalize="none">
      </div>

      <div class="button-group">
        <button class="btn-primary" onclick="nextStep()">Next Step</button>
      </div>
    </div>

    <!-- Step 2 -->
    <div class="form-step" data-step="2">
      <div class="form-field">
        <label for="firstName">First Name</label>
        <input
          type="text"
          id="firstName"
          placeholder="John"
          enterkeyhint="next"
          autocapitalize="words">
      </div>

      <div class="form-field">
        <label for="lastName">Last Name</label>
        <input
          type="text"
          id="lastName"
          placeholder="Smith"
          enterkeyhint="next"
          autocapitalize="words">
      </div>

      <div class="button-group">
        <button class="btn-secondary" onclick="previousStep()">Previous</button>
        <button class="btn-primary" onclick="nextStep()">Next Step</button>
      </div>
    </div>

    <!-- Step 3 -->
    <div class="form-step" data-step="3">
      <div class="form-field">
        <label for="company">Company (Optional)</label>
        <input
          type="text"
          id="company"
          placeholder="Acme Corporation"
          enterkeyhint="done"
          autocapitalize="words">
        <div class="hint">
          📱 Enter key shows "Done" ✓
        </div>
      </div>

      <div class="button-group">
        <button class="btn-secondary" onclick="previousStep()">Previous</button>
        <button class="btn-primary" onclick="alert('Form submitted!')">Complete</button>
      </div>
    </div>
  </div>
</div>

<script>
  let currentStep = 1;

  function nextStep() {
    if (currentStep < 3) {
      currentStep++;
      updateSteps();
    }
  }

  function previousStep() {
    if (currentStep > 1) {
      currentStep--;
      updateSteps();
    }
  }

  function updateSteps() {
    // Hide all steps
    document.querySelectorAll('.form-step').forEach(step => {
      step.classList.remove('active');
    });

    // Show current step
    document.querySelector(`[data-step="${currentStep}"]`).classList.add('active');

    // Update progress dots
    document.querySelectorAll('.progress-dot').forEach((dot, index) => {
      if (index < currentStep) {
        dot.classList.add('active');
      } else {
        dot.classList.remove('active');
      }
    });
  }
</script>
</body>
</html>

Messaging App

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body {
    font-family: Arial, sans-serif;
    background: #f1f5f9;
    margin: 0;
    padding: 20px;
  }
  .chat-container {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 600px;
  }
  .chat-header {
    background: #3b82f6;
    color: white;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #3b82f6;
  }
  .chat-info h3 {
    margin: 0;
    font-size: 18px;
  }
  .chat-info p {
    margin: 3px 0 0;
    font-size: 13px;
    opacity: 0.9;
  }
  .chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
  }
  .message {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
  }
  .message.sent {
    align-items: flex-end;
  }
  .message-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 18px;
    word-wrap: break-word;
  }
  .message.received .message-bubble {
    background: #f1f5f9;
    color: #1e293b;
  }
  .message.sent .message-bubble {
    background: #3b82f6;
    color: white;
  }
  .message-time {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
  }
  .chat-input {
    border-top: 1px solid #e2e8f0;
    padding: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .chat-input input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 24px;
    font-size: 15px;
    outline: none;
  }
  .chat-input input:focus {
    border-color: #3b82f6;
  }
  .send-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #3b82f6;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
</head>
<body>
<div class="chat-container">
  <div class="chat-header">
    <div class="avatar">JS</div>
    <div class="chat-info">
      <h3>John Smith</h3>
      <p>Active now</p>
    </div>
  </div>

  <div class="chat-messages" id="messages">
    <div class="message received">
      <div class="message-bubble">
        Hey! How are you doing?
      </div>
      <div class="message-time">10:30 AM</div>
    </div>

    <div class="message sent">
      <div class="message-bubble">
        I'm great! How about you?
      </div>
      <div class="message-time">10:32 AM</div>
    </div>

    <div class="message received">
      <div class="message-bubble">
        Doing well! Working on a new project.
      </div>
      <div class="message-time">10:33 AM</div>
    </div>
  </div>

  <div class="chat-input">
    <input
      type="text"
      placeholder="Type a message..."
      enterkeyhint="send"
      id="messageInput"
      onkeypress="if(event.key==='Enter') sendMessage()">
    <button class="send-button" onclick="sendMessage()">↗</button>
  </div>
</div>

<script>
  function sendMessage() {
    const input = document.getElementById('messageInput');
    const messages = document.getElementById('messages');

    if (input.value.trim()) {
      const messageDiv = document.createElement('div');
      messageDiv.className = 'message sent';
      messageDiv.innerHTML = `
        <div class="message-bubble">${input.value}</div>
        <div class="message-time">Just now</div>
      `;
      messages.appendChild(messageDiv);
      messages.scrollTop = messages.scrollHeight;
      input.value = '';
    }
  }
</script>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body {
    font-family: Arial, sans-serif;
    background: #f1f5f9;
    margin: 0;
    padding: 20px;
  }
  .chat-container {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 600px;
  }
  .chat-header {
    background: #3b82f6;
    color: white;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #3b82f6;
  }
  .chat-info h3 {
    margin: 0;
    font-size: 18px;
  }
  .chat-info p {
    margin: 3px 0 0;
    font-size: 13px;
    opacity: 0.9;
  }
  .chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
  }
  .message {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
  }
  .message.sent {
    align-items: flex-end;
  }
  .message-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 18px;
    word-wrap: break-word;
  }
  .message.received .message-bubble {
    background: #f1f5f9;
    color: #1e293b;
  }
  .message.sent .message-bubble {
    background: #3b82f6;
    color: white;
  }
  .message-time {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
  }
  .chat-input {
    border-top: 1px solid #e2e8f0;
    padding: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .chat-input input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 24px;
    font-size: 15px;
    outline: none;
  }
  .chat-input input:focus {
    border-color: #3b82f6;
  }
  .send-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #3b82f6;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
</head>
<body>
<div class="chat-container">
  <div class="chat-header">
    <div class="avatar">JS</div>
    <div class="chat-info">
      <h3>John Smith</h3>
      <p>Active now</p>
    </div>
  </div>

  <div class="chat-messages" id="messages">
    <div class="message received">
      <div class="message-bubble">
        Hey! How are you doing?
      </div>
      <div class="message-time">10:30 AM</div>
    </div>

    <div class="message sent">
      <div class="message-bubble">
        I'm great! How about you?
      </div>
      <div class="message-time">10:32 AM</div>
    </div>

    <div class="message received">
      <div class="message-bubble">
        Doing well! Working on a new project.
      </div>
      <div class="message-time">10:33 AM</div>
    </div>
  </div>

  <div class="chat-input">
    <input
      type="text"
      placeholder="Type a message..."
      enterkeyhint="send"
      id="messageInput"
      onkeypress="if(event.key==='Enter') sendMessage()">
    <button class="send-button" onclick="sendMessage()">↗</button>
  </div>
</div>

<script>
  function sendMessage() {
    const input = document.getElementById('messageInput');
    const messages = document.getElementById('messages');

    if (input.value.trim()) {
      const messageDiv = document.createElement('div');
      messageDiv.className = 'message sent';
      messageDiv.innerHTML = `
        <div class="message-bubble">${input.value}</div>
        <div class="message-time">Just now</div>
      `;
      messages.appendChild(messageDiv);
      messages.scrollTop = messages.scrollHeight;
      input.value = '';
    }
  }
</script>
</body>
</html>

All enterkeyhint Values

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .examples-container {
    max-width: 700px;
    margin: 20px;
    padding: 20px;
  }
  .mobile-alert {
    background: #fef3c7;
    border: 2px solid #f59e0b;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 30px;
  }
  .example-grid {
    display: grid;
    gap: 20px;
  }
  .example-item {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    transition: border-color 0.2s;
  }
  .example-item:hover {
    border-color: #3b82f6;
  }
  .example-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  .example-title {
    font-weight: bold;
    font-size: 18px;
    color: #1e293b;
  }
  .key-badge {
    background: #3b82f6;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-family: monospace;
  }
  .example-description {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 15px;
  }
  input, textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  input:focus, textarea:focus {
    outline: none;
    border-color: #3b82f6;
  }
  .icon {
    font-size: 24px;
    margin-right: 10px;
  }
</style>
</head>
<body>
<div class="examples-container">
  <div class="mobile-alert">
    <strong>📱 Mobile Testing Required</strong><br>
    These examples work best on mobile devices. The Enter key label changes based on the enterkeyhint value.
  </div>

  <h2>All enterkeyhint Values</h2>

  <div class="example-grid">
    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">🔍</span>
          <span class="example-title">search</span>
        </div>
        <span class="key-badge">Search</span>
      </div>
      <div class="example-description">
        For search queries. Shows magnifying glass icon.
      </div>
      <input
        type="search"
        placeholder="Search products..."
        enterkeyhint="search">
    </div>

    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">↗</span>
          <span class="example-title">send</span>
        </div>
        <span class="key-badge">Send</span>
      </div>
      <div class="example-description">
        For messages or emails. Shows paper plane icon.
      </div>
      <input
        type="text"
        placeholder="Type a message..."
        enterkeyhint="send">
    </div>

    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">→</span>
          <span class="example-title">next</span>
        </div>
        <span class="key-badge">Next</span>
      </div>
      <div class="example-description">
        To move to next field. Shows right arrow.
      </div>
      <input
        type="text"
        placeholder="First name"
        enterkeyhint="next">
    </div>

    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">←</span>
          <span class="example-title">previous</span>
        </div>
        <span class="key-badge">Previous</span>
      </div>
      <div class="example-description">
        To move to previous field. Shows left arrow.
      </div>
      <input
        type="text"
        placeholder="Navigate back"
        enterkeyhint="previous">
    </div>

    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">→</span>
          <span class="example-title">go</span>
        </div>
        <span class="key-badge">Go</span>
      </div>
      <div class="example-description">
        To navigate or submit. Generic action.
      </div>
      <input
        type="url"
        placeholder="Enter URL..."
        enterkeyhint="go">
    </div>

    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">✓</span>
          <span class="example-title">done</span>
        </div>
        <span class="key-badge">Done</span>
      </div>
      <div class="example-description">
        To complete input. Shows checkmark.
      </div>
      <input
        type="text"
        placeholder="Final field"
        enterkeyhint="done">
    </div>

    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">↵</span>
          <span class="example-title">enter</span>
        </div>
        <span class="key-badge">Enter</span>
      </div>
      <div class="example-description">
        Default behavior. For new lines.
      </div>
      <textarea
        rows="3"
        placeholder="Multi-line text..."
        enterkeyhint="enter"></textarea>
    </div>
  </div>
</div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .examples-container {
    max-width: 700px;
    margin: 20px;
    padding: 20px;
  }
  .mobile-alert {
    background: #fef3c7;
    border: 2px solid #f59e0b;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 30px;
  }
  .example-grid {
    display: grid;
    gap: 20px;
  }
  .example-item {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    transition: border-color 0.2s;
  }
  .example-item:hover {
    border-color: #3b82f6;
  }
  .example-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  .example-title {
    font-weight: bold;
    font-size: 18px;
    color: #1e293b;
  }
  .key-badge {
    background: #3b82f6;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-family: monospace;
  }
  .example-description {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 15px;
  }
  input, textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  input:focus, textarea:focus {
    outline: none;
    border-color: #3b82f6;
  }
  .icon {
    font-size: 24px;
    margin-right: 10px;
  }
</style>
</head>
<body>
<div class="examples-container">
  <div class="mobile-alert">
    <strong>📱 Mobile Testing Required</strong><br>
    These examples work best on mobile devices. The Enter key label changes based on the enterkeyhint value.
  </div>

  <h2>All enterkeyhint Values</h2>

  <div class="example-grid">
    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">🔍</span>
          <span class="example-title">search</span>
        </div>
        <span class="key-badge">Search</span>
      </div>
      <div class="example-description">
        For search queries. Shows magnifying glass icon.
      </div>
      <input
        type="search"
        placeholder="Search products..."
        enterkeyhint="search">
    </div>

    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">↗</span>
          <span class="example-title">send</span>
        </div>
        <span class="key-badge">Send</span>
      </div>
      <div class="example-description">
        For messages or emails. Shows paper plane icon.
      </div>
      <input
        type="text"
        placeholder="Type a message..."
        enterkeyhint="send">
    </div>

    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">→</span>
          <span class="example-title">next</span>
        </div>
        <span class="key-badge">Next</span>
      </div>
      <div class="example-description">
        To move to next field. Shows right arrow.
      </div>
      <input
        type="text"
        placeholder="First name"
        enterkeyhint="next">
    </div>

    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">←</span>
          <span class="example-title">previous</span>
        </div>
        <span class="key-badge">Previous</span>
      </div>
      <div class="example-description">
        To move to previous field. Shows left arrow.
      </div>
      <input
        type="text"
        placeholder="Navigate back"
        enterkeyhint="previous">
    </div>

    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">→</span>
          <span class="example-title">go</span>
        </div>
        <span class="key-badge">Go</span>
      </div>
      <div class="example-description">
        To navigate or submit. Generic action.
      </div>
      <input
        type="url"
        placeholder="Enter URL..."
        enterkeyhint="go">
    </div>

    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">✓</span>
          <span class="example-title">done</span>
        </div>
        <span class="key-badge">Done</span>
      </div>
      <div class="example-description">
        To complete input. Shows checkmark.
      </div>
      <input
        type="text"
        placeholder="Final field"
        enterkeyhint="done">
    </div>

    <div class="example-item">
      <div class="example-header">
        <div>
          <span class="icon">↵</span>
          <span class="example-title">enter</span>
        </div>
        <span class="key-badge">Enter</span>
      </div>
      <div class="example-description">
        Default behavior. For new lines.
      </div>
      <textarea
        rows="3"
        placeholder="Multi-line text..."
        enterkeyhint="enter"></textarea>
    </div>
  </div>
</div>
</body>
</html>

Best Practices

1. Match Action Intent

Choose the value that matches what happens when Enter is pressed:

<!-- Search field → "search" -->
<input type="search" enterkeyhint="search">

<!-- Chat message → "send" -->
<input type="text" enterkeyhint="send">

<!-- Multi-step form → "next" -->
<input type="text" enterkeyhint="next">

<!-- Final form field → "done" -->
<input type="email" enterkeyhint="done">

<!-- URL input → "go" -->
<input type="url" enterkeyhint="go">

2. Use with JavaScript Handlers

<input
  type="text"
  enterkeyhint="send"
  onkeypress="if(event.key==='Enter') sendMessage()">

3. Multi-Step Forms

<!-- Step 1 -->
<input enterkeyhint="next" id="step1">

<!-- Step 2 -->
<input enterkeyhint="next" id="step2">

<!-- Final step -->
<input enterkeyhint="done" id="step3">

4. Combine with Other Attributes

<input
  type="search"
  enterkeyhint="search"
  inputmode="search"
  autocomplete="off"
  placeholder="Search...">

Browser and Device Support

Platform	Support	Notes
iOS Safari	13.4+	Full support
Android Chrome	77+	Full support
Desktop browsers	Ignored	No virtual keyboard

Visual Appearance by Platform

iOS

search: “Search” with magnifying glass
send: “Send” with arrow
next: “Next” with arrow
done: “Done” text
go: “Go” with arrow

Android

search: Magnifying glass icon
send: Arrow icon
next: Arrow icon
done: Checkmark or “Done”
go: Arrow icon

Common Pitfalls

JavaScript API

const input = document.getElementById('myInput');

// Set enterkeyhint
input.enterKeyHint = 'send';
input.setAttribute('enterkeyhint', 'send');

// Get current value
console.log(input.enterKeyHint); // "send"

// Handle Enter key
input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    // Perform action based on hint
    if (input.enterKeyHint === 'send') {
      sendMessage();
    } else if (input.enterKeyHint === 'search') {
      performSearch();
    }
  }
});

inputmode - Hint for virtual keyboard type
autocapitalize - Control text capitalization
autocomplete - Suggest previously entered values

The enterkeyhint Attribute

The enterkeyhint Attribute

Syntax

Values

Examples

Search Form

Multi-Step Form

Messaging App

All enterkeyhint Values

Best Practices

1. Match Action Intent

2. Use with JavaScript Handlers

3. Multi-Step Forms

4. Combine with Other Attributes

Browser and Device Support

Visual Appearance by Platform

iOS

Android

Common Pitfalls

JavaScript API

Related Attributes

Specifications

The `enterkeyhint` Attribute