# Can FluentRead Translate Text in Input Boxes? A Complete Technical Guide

> Yes FluentRead translates input box text. Discover how to enable this feature for <input>, <textarea>, and contentEditable elements with custom triggers. Get the complete guide.

- Repository: [ThinkStu/fluentread](https://github.com/bistutu/fluentread)
- Tags: how-to-guide
- Published: 2026-02-26

---

**Yes, FluentRead can translate text inside `<input>`, `<textarea>`, and `contentEditable` elements using customizable triggers like Ctrl+Enter or triple-key sequences.**

FluentRead is an open-source browser extension that provides real-time translation capabilities. Beyond webpage content, it offers a specialized **input box translation** feature that allows users to translate text directly within editable form fields without leaving the page or copying text to external tools.

## How Input Box Translation Works

The input box translation system operates through a dedicated event listener and translation pipeline implemented in the extension's content script. When enabled, it monitors keyboard events on editable elements and triggers translation via Microsoft Translator.

### Configuration and Options

Users control the feature through two primary settings defined in [`entrypoints/utils/option.ts`](https://github.com/bistutu/fluentread/blob/main/entrypoints/utils/option.ts):

- **`inputBoxTranslationTrigger`**: Determines how translation is activated (Ctrl+Enter, triple space, triple equals, or triple dash)
- **`inputBoxTranslationTarget`**: Specifies the language code for translation output (e.g., `"zh-Hans"`, `"en"`)

Default values are stored in [`entrypoints/utils/model.ts`](https://github.com/bistutu/fluentread/blob/main/entrypoints/utils/model.ts), where `inputBoxTranslationTrigger` defaults to `"disabled"` and `inputBoxTranslationTarget` defaults to `"en"`. This means the feature requires explicit user activation before functioning.

### Event Listener Registration

When the extension loads, `setupInputBoxTranslation()` in [`entrypoints/content.ts`](https://github.com/bistutu/fluentread/blob/main/entrypoints/content.ts) registers a `keydown` listener on the active page. The listener performs two critical checks before proceeding:

1. Verifies the feature is enabled (`config.inputBoxTranslationTrigger !== "disabled"`)
2. Confirms the focused element is editable using `isInputElement(activeElement)`

### Trigger Detection Logic

The system supports four distinct activation methods, each detected within the `keydown` event handler:

| Trigger | Activation Method | Implementation Detail |
|---------|------------------|----------------------|
| **Ctrl + Enter** | Hold Ctrl and press Enter | Immediate detection on key combination |
| **Triple Space** | Press Space three times within 1 second | Counts consecutive Space presses with `TRIPLE_KEY_TIMEOUT` |
| **Triple Equals** | Press `=` three times within 1 second | Tracks `=` key using the same timeout mechanism |
| **Triple Dash** | Press `-` three times within 1 second | Monitors `-` key for rapid sequential presses |

The triple-key detection uses a 1-second window (`TRIPLE_KEY_TIMEOUT`) to distinguish intentional triggers from normal typing.

### The Translation Pipeline

Once a valid trigger is detected, `handleInputBoxTranslation(element)` executes the following workflow:

1. **Text Extraction**: Retrieves original text using `getInputBoxText()`
2. **Trigger Stripping**: Removes trailing trigger symbols via `removeTriggerSymbols()`
3. **Visual Feedback**: Applies `addInputBoxAnimation()` and `createTranslationTooltip()` to show "translating" status
4. **API Call**: Sends text to Microsoft Translator through `translateWithMicrosoft()`
5. **Result Injection**: Updates the field value using `setInputBoxText()`
6. **Completion States**: Applies CSS classes `fluent-input-success` or `fluent-input-error` based on the outcome

**Important**: Unlike standard page translation, input box translation **bypasses the cache** to ensure users always receive the most current translation result.

## Supported Input Elements

FluentRead recognizes three categories of editable elements for translation:

- **Standard inputs**: HTML `<input>` fields (text, search, URL types)
- **Text areas**: HTML `<textarea>` elements for multi-line content
- **Rich text editors**: Elements with `contentEditable="true"` attributes

The utility function `isInputElement()` in the codebase handles edge cases and cross-browser compatibility when identifying these elements.

## Customizing Your Input Box Translation Settings

Configure the feature by updating your extension options. The settings follow this JSON structure:

```json
{
  "inputBoxTranslationTrigger": "triple_space",
  "inputBoxTranslationTarget": "zh-Hans"
}

```

Valid values for `inputBoxTranslationTrigger` include:
- `"ctrl_enter"`
- `"triple_space"`
- `"triple_equal"`
- `"triple_dash"`
- `"disabled"`

Language codes must match those defined in [`entrypoints/utils/option.ts`](https://github.com/bistutu/fluentread/blob/main/entrypoints/utils/option.ts), which supports major languages including English, Chinese (Simplified and Traditional), Japanese, Spanish, French, German, and others.

## Technical Implementation Details

### Key Files and Functions

The input box translation feature spans several critical source files:

- **[`entrypoints/content.ts`](https://github.com/bistutu/fluentread/blob/main/entrypoints/content.ts)**: Contains `setupInputBoxTranslation()` for event listening and `handleInputBoxTranslation()` for orchestration
- **[`entrypoints/utils/option.ts`](https://github.com/bistutu/fluentread/blob/main/entrypoints/utils/option.ts)**: Defines available trigger types and target languages in arrays exported as configuration options
- **[`entrypoints/utils/model.ts`](https://github.com/bistutu/fluentread/blob/main/entrypoints/utils/model.ts)**: Stores default configuration objects used during extension initialization
- **[`entrypoints/utils/common.ts`](https://github.com/bistutu/fluentread/blob/main/entrypoints/utils/common.ts)**: Provides helper utilities including `isInputElement()`, `getInputBoxText()`, `setInputBoxText()`, and `removeTriggerSymbols()`

### User Interface Feedback

During translation, the extension applies CSS classes to the active element:
- `fluent-input-translating`: Shows during API request
- `fluent-input-success`: Applied on successful translation completion
- `fluent-input-error`: Applied when translation fails

These classes trigger visual animations defined in the extension's stylesheet, while `createTranslationTooltip()` generates temporary status messages that auto-disappear after a few seconds.

## Summary

- **FluentRead translates input boxes** using a specialized content script that monitors keyboard events on editable elements.
- **Four trigger options** are available: Ctrl+Enter, triple space, triple equals, or triple dash, configurable in the extension options.
- **Microsoft Translator powers** the input box feature, delivering real-time results without page reloads.
- **No caching** occurs for input translations, ensuring fresh results every time.
- **Three element types** are supported: `<input>`, `<textarea>`, and `contentEditable` fields.

## Frequently Asked Questions

### Does FluentRead translate text in password input fields?

No, the extension specifically excludes password-type inputs for security reasons. The `isInputElement()` helper function filters out sensitive input types, ensuring that hidden credentials are never sent to translation services. Only standard text inputs, textareas, and contentEditable elements are processed.

### Can I use different target languages for webpage translation versus input box translation?

Yes, FluentRead maintains separate configuration values for these features. While `inputBoxTranslationTarget` controls form field output, webpage translation uses distinct settings. You can set input boxes to translate to Chinese while keeping page content in English, or configure any other language combination supported in [`entrypoints/utils/option.ts`](https://github.com/bistutu/fluentread/blob/main/entrypoints/utils/option.ts).

### Why isn't my triple-key trigger working consistently?

The triple-key detection requires all three presses to occur within a 1-second window (`TRIPLE_KEY_TIMEOUT`). If you type too slowly, the counter resets. Additionally, if the input field loses focus between key presses or if modifier keys interfere with the sequence, the trigger may not register. For maximum reliability, use the **Ctrl+Enter** trigger instead.

### Is the input box translation feature enabled by default?

No, according to the defaults defined in [`entrypoints/utils/model.ts`](https://github.com/bistutu/fluentread/blob/main/entrypoints/utils/model.ts), `inputBoxTranslationTrigger` is set to `"disabled"` upon installation. Users must explicitly navigate to the extension options and select a trigger method before the feature becomes active. This prevents accidental translations during normal browsing sessions.