Edit In Place

Click any text to edit it inline without opening a form or modal

1. Basic Text Editing

Click on any text below to edit it directly

johndoe
john@example.com
081-234-5678

HTML Code


            <span data-component="editinplace"
              data-field="username">johndoe</span>

            <!-- With input type -->
            <span data-component="editinplace"
              data-pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}"
              data-field="email">john@example.com</span>

2. HTML5 Input Types & Validation

Use HTML5 input attributes for client-side validation. Server handles final validation and returns error if needed.

25
user@example.com
081-234-5678
johndoe
Note: Uses pattern, minlength, maxlength, placeholder, and required attributes. Server should validate and return error for final validation.

HTML Code


            <!-- Pattern validation -->
            <span data-component="editinplace"
              data-pattern="[0-9]+"
              data-required
              data-placeholder="Enter age">25</span>

            <!-- Email pattern -->
            <span data-component="editinplace"
              data-pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}"
              data-placeholder="user@example.com">user@example.com</span>

            <!-- Length validation -->
              <span data-component="editinplace"
              data-minlength="3"
              data-maxlength="20">johndoe</span>

3. AJAX Auto-Save

Automatically save changes to server via AJAX

iPhone 15 Pro
39,900.00
Note: Changes are automatically saved to the server when you finish editing. Server will format the price with 2 decimals.

HTML Code


            <!-- AJAX is auto-enabled when data-ajax-url is provided -->
            <span data-component="editinplace"
              data-ajax-url="api/save.php"
              data-field="product_name">iPhone 15 Pro</span>

            <!-- Server can return formatted value -->
              <span data-component="editinplace"
              data-ajax-url="api/save.php"
              data-field="product_price">39,900.00</span>

4. JavaScript Callbacks

Handle save events with custom JavaScript functions

Edit me to see callback

HTML + JavaScript


            <span data-component="editinplace"
              data-callback="handleSave"
              data-field="with_callback">Edit me</span>

            <script>
            function handleSave(newValue, instance) {
              console.log('Saved:', newValue);
              // Return false to cancel save
              // Return new value to modify before saving
              return true;
              }
              </script>

5. Table Integration

Use edit-in-place within tables for quick editing

ID Name Email Status Role
1 John Doe john@example.com Active Admin
2 Jane Smith jane@example.com Inactive Editor
3 Bob Wilson bob@example.com Active Viewer

Data Attributes Reference

Attribute Description Values
data-component="editinplace" Enable edit-in-place component editinplace
data-pattern Regex pattern for validation Regex string
data-minlength Minimum length of text Number
data-maxlength Maximum length of text Number
data-placeholder Placeholder text for input Text string
data-required Require a value (boolean attribute) No value needed
data-field Field name for server String
data-ajax-save Enable AJAX save true
data-ajax-url AJAX endpoint URL URL string
data-callback Global function name for onSave Function name

Keyboard Shortcuts

Key Action
Enter Start editing / Save changes (for input)
Space Start editing (when focused)
Escape Cancel editing and restore original value
Tab Move to next editable element