Expand my Community achievements bar.

How to add superscript functionality to single line textfield.


Level 1

 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.

1 Reply


Community Advisor

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


  1. 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.


(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.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);

})(document, Granite.$);



  1. Include the Custom Client Library in Your Component:
    • Ensure your component's dialog includes the custom client library.
          categories="[custom-textfield]" />
  2. Modify the Component Dialog to Use the Custom Widget:
    • Update your component's dialog to use the custom Coral UI text field.
          fieldLabel="Video Title"
          class="custom-textfield-superscript" />​


Asif Ahmed