Keydown event on shape text editing

Keydown event on shape text editing

Posted by: thom.prosch on 23 August 2023, 12:21 am EST

• 

  thom.prosch

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 August 2023, 12:21 am EST

  Hi,

  I would like to implement a shape, where the enter button commits the editing and does not enter the next line.

  Is this possible?

  Thanks, Thom

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 23 August 2023, 9:13 pm EST - Updated 23 August 2023, 9:18 pm EST

  Hi Thom,

  You could handle the ShapeChanged Event that gets triggered when the Shape is selected. Then you could add the keydown event listener on the ShapeEditor, check for the “Enter” key down.

  Kindly refer to the following code snippet and the sample:

      // Bind the ShapeChanged Event
      spread.bind(GC.Spread.Sheets.Events.ShapeChanged, function (sender, args) {
          let shape = args.shape;
          if (args.propertyName === "isSelected" && shape.isSelected()) {
              setTimeout(() => {
                  let shapeEditorEl = spread.getHost().querySelector("div.gcSpread.shape-editor");
                  if (shapeEditorEl) {
                      // Add KeyDown Event Handler
                      shapeEditorEl.addEventListener("keydown", function (event) {
                          if (event.key === "Enter") {
                              // Prevent the Default
                              event.preventDefault();
                              // Take the focus out
                              shapeEditorEl.blur();
                              // Remove the last "\n" from the Shape's text
                              shape.text(shape.text().replace(/\n$/, ''))
                          }
                      })
                  }
              })
          }
      });

  Sample: https://jscodemine.grapecity.com/share/5aH9vanMU0aQ6vBSi89aqw/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fapp.js"]%2C"ActiveFile"%3A"%2Fapp.js"}

  References:

  ShapeChanged Event: https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.Events#shapechanged

  Please let us know if you face any issues.

  Regards,

  Ankit

  

• 

  thom.prosch

  • Post Options:
  • Link
    Copy

  Posted 26 August 2023, 10:17 pm EST

  Perfect, thanks a lot.
  
  BR, Thom