Skip to content
Related Articles

Related Articles

script.aculo.us InPlaceEditor clickToEditText Option
  • Last Updated : 27 Nov, 2020

The script.aculo.us library is a cross-browser library that aims to improving the user interface of a website. The Ajax.InPlaceEditor is used to make elements editable thereby allowing the user to edit the content on the page and submit the changes to the server.

The InPlaceEditor clickToEditText option is used to specify the text to be shown when the user hovers the mouse over the editable element. The default string of the option is “Click to edit”.

Syntax:

{ clickToEditText : string }

Value: This option has a single value as mentioned above and described below:

  • string: This is a string that specifies the text to be shown when the user hovers the mouse over the editable element. The default string is “Click to edit”.

The below example illustrates the use of InPlaceEditor clickToEditText option.



Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript"
        src="prototype.js">
    </script>
  
    <script type="text/javascript" 
        src="scriptaculous.js?load = controls">
    </script>
  
    <script type="text/javascript">
        window.onload = function () {
  
            // Default InplaceEditor with no
            // options
            new Ajax.InPlaceEditor(
                'editableElement',
                'http://localhost/tmpscripts/inplace.php',
            );
  
            // InplaceEditor with a modified
            // clickToEditText value
            new Ajax.InPlaceEditor(
                'editableElement2',
                'http://localhost/tmpscripts/inplace.php',
                {
                    // Specify the text to be used for 
                    // the hover text of the editor
                    clickToEditText: 
                        "Click here to start editing"
                }
            );
        }
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
  
    <h2>InPlaceEditor clickToEditText Option</h2>
  
  
    <p>
        The "clickToEditText" option is used to
        specify the text to be shown when the user
        hovers the mouse over the editable element.
    </p>
  
  
    <b>This element has the clickToEditText as
        the default one.</b>
  
    <div id="editableElement">
        Hover over this element to see the 
        clickToEditText value.
    </div>
    <br>
    <b>
        This element has the clickToEditText 
        set to a custom value.
    </b>
      
    <div id="editableElement2">
        Hover over this element to see the 
        clickToEditText value.
    </div>
</body>
  
</html>

The below script is the required PHP file to simulate the saving of data to the server.

PHP




<?php
  if( isset($_REQUEST["value"]) ) {
    $str = $_REQUEST["value"];
    echo $str;
  }
?>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :