Keyboard
Provides precise programmatic control over the native onscreen keyboard for your enterprise web applications.
Overview
The Keyboard API allows you to manually show or hide the device's onscreen keyboard without relying exclusively on HTML input focus behaviors. This provides a smoother and more predictive user experience during complex form interactions or custom search implementations.
API Reference
show()
Forces the onscreen keyboard to appear on supported mobile platforms.
Parameters
None.
Returns
Promise<void> - Resolves when the keyboard animation has started.
Throws
Throws a KeyboardUnavailableError if invoked on desktop or environments without a software keyboard.
hide()
Forces the onscreen keyboard to disappear. Ideal for clearing screen space once a user has submitted a form or navigated away from an input context.
Parameters
None.
Returns
Promise<void> - Resolves when the keyboard animation has started.
React / Next.js Examples
Auto-hiding on Submission
In an enterprise CRM application, you may want to dismiss the keyboard immediately upon submitting a complex search query to reveal the data table results.
import React, { useState, useRef } from 'react';
export default function GlobalSearch() {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const handleSearch = async (e: React.FormEvent) => {
e.preventDefault();
if (!query.trim()) return;
// Hide the keyboard to maximize screen space for results
await window.easycord.keyboard.hide();
// Blur the input to remove standard browser focus outline
inputRef.current?.blur();
setIsLoading(true);
try {
const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
const data = await response.json();
setResults(data);
} catch (err) {
console.error(err);
} finally {
setIsLoading(false);
}
};
return (
<div className="w-full max-w-2xl mx-auto p-4">
<form onSubmit={handleSearch} className="flex gap-2 mb-6">
<input
ref={inputRef}
type="search"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search customers, invoices..."
className="flex-1 px-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500"
/>
<button
type="submit"
className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
>
Search
</button>
</form>
{isLoading && <p>Loading results...</p>}
{/* Results Table omitted for brevity */}
</div>
);
}