How to add superscript functionality to single line textfield.

Question

suppose i authored video component .I have video title field as granite/ui/components/coral/foundation/form/text field . I have to add superscript functionality to that field.

I don't want to use rte., rich text box. how i can achieve this anyone can help me on this.

AsifChowdhury · Accepted Answer

Hi @prachiat

OOTB there is no functionality to add superscript in the textfield. Maybe you can achieve by creating a custom textfield but it will be a lot overworked compared to just adding the richtext.

You can get an idea to get a custom textfield with superscript support

Create a Custom Coral UI Text Field Widget:
- Create a client library in your AEM project, for example, /apps/your-project/clientlibs/custom-textfield.
- Include custom-textfield.js and custom-textfield.css files in the client library.

`custom-textfield.js`

(function(document, $) {
    'use strict';

    $(document).on('foundation-contentloaded', function(e) {
        $('.custom-textfield-superscript').each(function() {
            var $textfield = $(this);

            // Add superscript button
            var $button = $('<button type="button" class="coral-Button coral-Button--quiet custom-superscript-button">Sup</button>');
            $button.insertAfter($textfield);

            $button.on('click', function() {
                var selectionStart = $textfield[0].selectionStart;
                var selectionEnd = $textfield[0].selectionEnd;

                if (selectionStart !== selectionEnd) {
                    var value = $textfield.val();
                    var selectedText = value.substring(selectionStart, selectionEnd);
                    var superscriptText = '<sup>' + selectedText + '</sup>';
                    var newText = value.substring(0, selectionStart) + superscriptText + value.substring(selectionEnd);

                    $textfield.val(newText);
                }
            });
        });
    });
})(document, Granite.$);

Include the Custom Client Library in Your Component:
- Ensure your component's dialog includes the custom client library.<clientlibs jcr:primaryType="nt:unstructured" categories="[custom-textfield]" />
Modify the Component Dialog to Use the Custom Widget:
- Update your component's dialog to use the custom Coral UI text field.<videoTitle jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Video Title" name="./videoTitle" class="custom-textfield-superscript" />

Asif Ahmed

custom-textfield.js

custom-textfield.js

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded

`custom-textfield.js`

`custom-textfield.js`