ejmEditor

The Essential JavaScript Mobile Editor controls are used to display or get the value.

Requires

  • module:jQuery

  • module:ej.core

  • module:ej.unobtrusive

  • module:ej.mobile.core

  • module:ej.data

  • module:ej.touch

Example

TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="textbox" data-role="ejmtextbox" />
  • html
  • <!-- Obtrusive way of rendering -->
        <input id="textbox" />
        <script>
            //Create the textbox
            $("#textbox").ejmTextBox();
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="password" data-role="ejmpassword" />
  • html
  • <!-- Obtrusive way of rendering -->
        <input id="password" />
        <script>
            //Create the password
            $("#password").ejmPassword();
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" />
  • html
  • <!-- Obtrusive way of rendering -->
        <input id="maskedit" />
        <script>
            //Create the maskedit
            $("#maskedit").ejmMaskEdit({ format: "00/00/0000" });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
       <textarea id="textarea" data-role="ejmtextarea"></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        
        <textarea id="textarea"></textarea>
        <script>
            //Create the textarea
            $("#textarea").ejmTextArea();
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="editor" type="number" />
        <script>
            $("#editor").ejmNumeric();
        </script>

    Members

    autoFocus Boolean

    Specifies the control automatically get focus on initialization.

    Default Value:

    • false

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
     <input id="textbox" data-role="ejmtextbox" data-ej-autofocus="true" />
  • html
  • <!-- Obtrusive way of rendering --> 
       <input id="textbox" />
        <script>
            //Create the textbox
            $("#textbox").ejmTextBox({ autoFocus: true });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
      <input id="password" data-role="ejmpassword" data-ej-autofocus="true" />
  • html
  • <!-- Obtrusive way of rendering --> 
          <input id="password" />
        <script>
            //Create the password
            $("#password").ejmPassword({ autoFocus: true });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
      <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" data-ej-autofocus="true" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="maskedit" />
        <script>
            //Create the maskedit
            $("#maskedit").ejmMaskEdit({ format: "00/00/0000", autoFocus: true });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
     <textarea id="textarea" data-role="ejmtextarea" data-ej-autofocus="true"></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        <textarea id="textarea"></textarea>
        <script>
            //Create the textarea
            $("#textarea").ejmTextArea({ autoFocus: true });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-autofocus="true" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="editor" type="number" />
        <script>
            $("#editor").ejmNumeric({ autoFocus: true });
        </script>

    borderStyle Enum

    Specifies the style of the border. See BorderStyle

    Default Value:

    • ”box”

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="textbox" data-role="ejmtextbox" data-ej-borderstyle="line" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="textbox" />
        <script>
            //Create the textbox
            $("#textbox").ejmTextBox({ borderStyle: "line" });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="password" data-role="ejmpassword" data-ej-borderstyle="line" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="password" />
        <script>
            //Create the password
            $("#password").ejmPassword({ borderStyle: "line" });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" data-ej-borderstyle="line" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="maskedit" />
        <script>
            //Create the maskedit
            $("#maskedit").ejmMaskEdit({ format: "00/00/0000", borderStyle: "line" });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
        <textarea id="textarea" data-role="ejmtextarea" data-ej-borderstyle="line"></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        <textarea id="textarea"></textarea>
        <script>
            //Create the textarea
            $("#textarea").ejmTextArea({ borderStyle: "line" });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-borderstyle="line" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="editor" type="number" />
        <script>
            $("#editor").ejmNumeric({ borderStyle: "line" });
        </script>

    cssClass String

    Sets the root class for Editor theme. This cssClass API helps to use custom skinning option for Editor Control. By defining the root class using this API, we need to include this root class in CSS.

    Default Value:

    • ””

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="textbox" data-role="ejmtextbox" data-ej-cssclass="customclass" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="textbox" />
        <script>
            //Create the textbox
            $("#textbox").ejmTextBox({ cssClass: "customclass" });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="password" data-role="ejmpassword" data-ej-cssclass="customclass" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="password" />
        <script>
            //Create the password
            $("#password").ejmPassword({ cssClass: "customClass" });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" data-ej-cssclass="customclass" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="maskedit" />
        <script>
            //Create the maskedit
            $("#maskedit").ejmMaskEdit({ format: "00/00/0000", cssClass: "customclass" });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
        <textarea id="textarea" data-role="ejmtextarea" data-ej-cssclass="customclass"></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        <textarea id="textarea"></textarea>
        <script>
            //Create the textarea
            $("#textarea").ejmTextArea({ cssClass: "customclass" });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-cssclass="customclass" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="editor" type="number" />
        <script>
            $("#editor").ejmNumeric({ cssClass: "customclass" });
        </script>

    enabled Boolean

    Specifies whether to enable or disable the control.

    Default Value:

    • true

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="textbox" data-role="ejmtextbox" data-ej-enabled=false />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="textbox" />
        <script>
            $("#textbox").ejmTextBox({ enabled: false });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="password" data-role="ejmpassword" data-ej-enabled=false />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="password" />
        <script>
            $("#password").ejmPassword({ enabled: false });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="maskedit" data-role="ejmmaskedit" data-ej-enabled=false data-ej-format="+1 (999) 999-9999" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="maskedit" />
        <script>
            $("#maskedit").ejmMaskEdit({ enabled: false, mask: "+1 (999) 999-9999" });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
        <textarea id="textarea" data-role="ejmtextarea" data-ej-enabled=false></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        <textarea id="textarea"></textarea>
        <script>
            $("#textarea").ejmTextArea({ enabled: false });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-enabled=false />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input type="number" id="editor" />
        <script>
            $("#editor").ejmNumeric({ enabled: false });
        </script>

    enablePersistence Boolean

    Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.

    Default Value:

    • false

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="textbox" data-role="ejmtextbox" data-ej-enablepersistence=false />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="textbox" />	
        <script>
            $("#textbox").ejmTextBox({ enablePersistence: false });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="password" data-role="ejmpassword" data-ej- enablepersistence =false />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="password" />
        <script>
            $("#password").ejmPassword({ enablePersistence: false });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="maskedit" data-role="ejmmaskedit" data-ej- enablepersistence =false data-ej-format="+1 (999) 999-9999" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="maskedit" />
        <script>
            $("#maskedit").ejmMaskEdit({ enablePersistence: false, mask: "+1 (999) 999-9999" });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
        <textarea id="textarea" data-role="ejmtextarea" data-ej- enablepersistence =false></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        <textarea id="textarea"></textarea>
        <script>	
            $("#textarea").ejmTextArea({ enablePersistence: false });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej- enablepersistence =false />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input type="number" id="editor" />
        <script>
            $("#editor").ejmNumeric({ enablePersistence: false });
        </script>

    format String

    Specifies the ‘format’ for maskedit.

    Default Value:

    • ””

    Example

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="maskedit" />
        <script>
            //Create the maskedit
            $("#maskedit").ejmMaskEdit({ format: "00/00/0000" });
        </script>

    height String

    Specifies the text area height on initialization.

    Default Value:

    • ””

    Example

    textarea

  • html
  • <!-- Unobtrusive way of rendering -->
       <textarea id="textarea" data-role="ejmtextarea" data-ej-height="200"></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        <textarea id="textarea"></textarea>
        <script>
            //Create the textarea
            $("#textarea").ejmTextArea({ height: "200" });
        </script>

    locale String

    Change the Control text format based on given culture.

    Default Value:

    • “en-US”

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="textbox" data-role="ejmtextbox" data-ej-locale="en-US" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="textbox" />
        <script>
            //Create the textbox
            $("#textbox").ejmTextBox({ locale: "en-US" });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="password" data-role="ejmpassword" data-ej-locale="en-US" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="password" />
        <script>
            //Create the password
            $("#password").ejmPassword({ locale: "en-US" });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" data-ej-locale="en-US" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="maskedit" />
        <script>
            //Create the maskedit
            $("#maskedit").ejmMaskEdit({ format: "00/00/0000", locale: "en-US" });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
        <textarea id="textarea" data-role="ejmtextarea" data-ej-locale="en-US"></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        <textarea id="textarea"></textarea>
        <script>
            //Create the textarea
            $("#textarea").ejmTextArea({ locale: "en-US" });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-locale="en-US" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="editor" type="number" />
        <script>
            $("#editor").ejmNumeric({ locale: "en-US" });
        </script>

    maxLength String

    Specifies the maximum length on initialization.

    Default Value:

    • ””

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="textbox" data-role="ejmtextbox" data-ej-maxlength ="5" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="textbox" />
        <script>
            //Create the textbox
            $("#textbox").ejmTextBox({ maxLength: "5" });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="password" data-role="ejmpassword" data-ej-maxlength ="5 " />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="password" />
        <script>
            //Create the password
            $("#password").ejmPassword({ maxLength: "5" });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
        <textarea id="textarea" data-role="ejmtextarea" data-ej-maxlength ="5"></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        <textarea id="textarea"></textarea>
        <script>
            //Create the textarea
            $("#textarea").ejmTextArea({ maxLength: "5" });
        </script>

    maxValue Int

    Specifies the maximum value of the numeric textbox.

    Default Value:

    • -(Number.MAX_VALUE)

    Example

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-maxvalue="5" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="editor" type="number" />
        <script>
            $("#editor").ejmNumeric({ maxValue: 5 });
        </script>

    minValue Int

    Specifies the minimum value of the numeric textbox.

    Default Value:

    • Number.MAX_VALUE

    Example

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-minvalue="5" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="editor" type="number" />
        <script>
            $("#editor").ejmNumeric({ minValue: 5 });
        </script>

    readOnly Boolean

    Specifies whether to be ‘readonly’ on initialization.

    Default Value:

    • false

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="textbox" data-role="ejmtextbox" data-ej-readonly=true />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="textbox" />
        <script>
            $("#textbox").ejmTextBox({ readOnly: true });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="password" data-role="ejmpassword" data-ej-readonly=true />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="password" />
        <script>
            $("#password").ejmPassword({ readOnly: true });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="maskedit" data-role="ejmmaskedit" data-ej-readonly=true data-ej-format="+1 (999) 999-9999" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="maskedit" />
        <script>
            $("#maskedit").ejmMaskEdit({ readOnly: true, mask: "+1 (999) 999-9999" });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
        <textarea id="textarea" data-role="ejmtextarea" data-ej-readonly=true></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        <textarea id="textarea"></textarea>
        <script>
            $("#textarea").ejmTextArea({ readOnly: true });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-readonly=true />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input type="number" id="editor" />
        <script>
            $("#editor").ejmNumeric({ readOnly: true });
        </script>

    NOTE

    In Numeric textbox Specifies whether the control is read only to disable typing the value manually rather than updating by spin button.

    renderMode Enum

    Specifies the rendering mode of the control. See RenderMode

    Default Value:

    • auto

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="textbox" data-role="ejmtextbox" data-ej-rendermode="android" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="textbox" />
        <script>
            //Create the textbox
            $("#textbox").ejmTextBox({ renderMode: "android" });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="password" data-role="ejmpassword" data-ej-rendermode="android" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="password" />
        <script>
            //Create the password
            $("#password").ejmPassword({ renderMode: "android" });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" data-ej-rendermode="android" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="maskedit" />
        <script>
            //Create the maskedit
            $("#maskedit").ejmMaskEdit({ format: "00/00/0000", renderMode: "android" });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
       <textarea id="textarea" data-role="ejmtextarea" data-ej-rendermode="android"></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        <textarea id="textarea"></textarea>
        <script>
            //Create the textarea
            $("#textarea").ejmTextArea({ renderMode: "android" });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-rendermode="android" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="editor" type="number" />
        <script>
            $("#editor").ejmNumeric({ renderMode: "android" });
        </script>

    step Int

    Specifies the step value of numeric textbox for increments / decrements.

    Default Value:

    • 1

    Example

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-step="5" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="editor" type="number" />
        <script>
            $("#editor").ejmNumeric({ step: 5 });
        </script>

    type Enum

    Specifies the textbox type.see Type

    Default Value:

    • ”text”

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="textbox" data-role="ejmtextbox" data-ej-type="tel" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="textbox" />
        <script>
            //Create the textbox
            $("#textbox").ejmTextBox({ type: "tel" });
        </script>

    value String

    Specifies the ‘value’ on initialization.

    Default Value:

    • ””

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="textbox" data-role="ejmtextbox" data-ej-value="Enter here" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="textbox" />
        <script>
            //Create the textbox
            $("#textbox").ejmTextBox({ value: "Enter here" });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="password" data-role="ejmpassword" data-ej-value="Enter here" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="password" />
        <script>
            //Create the password
            $("#password").ejmPassword({ value: "Enter here" });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" data-ej-value="12/12/2012" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="maskedit" />
        <script>
            //Create the maskedit
            $("#maskedit").ejmMaskEdit({ format: "00/00/0000", value: "12/12/2012" });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
       <textarea id="textarea" data-role="ejmtextarea" data-ej-value ="Enter here"></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        <textarea id="textarea"></textarea>
        <script>
            //Create the textarea
            $("#textarea").ejmTextArea({ value: "Enter here" });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-value="10" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="editor" type="number" />
        <script>
            $("#editor").ejmNumeric({ value: "10" });
        </script>

    watermarkText String

    The text to be displayed when the value of the textbox is empty.

    Default Value:

    • ””

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="textbox" data-role="ejmtextbox" data-ej-watermarktext="Enter here" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="textbox" />
        <script>
            //Create the textbox
            $("#textbox").ejmTextBox({ watermarkText: "Enter here" });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="password" data-role="ejmpassword" data-ej-watermarktext="Enter here" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="password" />
        <script>
            //Create the password
            $("#password").ejmPassword({ watermarkText: "Enter here" });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" data-ej-watermarktext="Enter here" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="maskedit" />
        <script>
            //Create the maskedit
            $("#maskedit").ejmMaskEdit({ format: "00/00/0000", watermarkText: "Enter here" });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
       <textarea id="textarea" data-role="ejmtextarea" data-ej-watermarktext ="Enter here"></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        <textarea id="textarea"></textarea>
        <script>
            //Create the textarea
            $("#textarea").ejmTextArea({ watermarkText: "Enter here" });
        </script>

    width String

    Specifies the width on initialization.

    Default Value:

    • ””

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
    <input id="textbox" data-role="ejmtextbox" data-ej-width="200" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="textbox" />
        <script>
            //Create the textbox
            $("#textbox").ejmTextBox({ width: "200" });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="password" data-role="ejmpassword" data-ej-width="200" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="password" />
        <script>
            //Create the password
            $("#password").ejmPassword({ width: "200" });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" data-ej-width="200" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="maskedit" />
        <script>
            //Create the maskedit
            $("#maskedit").ejmMaskEdit({ format: "00/00/0000", width: "200" });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
       <textarea id="textarea" data-role="ejmtextarea" data-ej-width="200"></textarea>
  • html
  • <!-- Obtrusive way of rendering --> 
        <textarea id="textarea"></textarea>
        <script>
            //Create the textarea
            $("#textarea").ejmTextArea({ width: "200" });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-width="200" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="editor" type="number" />
        <script>
            $("#editor").ejmNumeric({ width: "200" });
        </script>

    Events

    keyDown

    Event triggers when the KeyDown happens on the control.

    Name Type Description
    argument Object Event parameters.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    value string Returns the value of the control

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="textbox" data-role="ejmtextbox" data-ej-keydown="keyDown" />
    
        <script>
            function keyDown(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
     <input id="textbox" />
    
        <script>
            $("#textbox").ejmTextBox({
                keyDown: function (args) { //handle the event
                }
            });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="password" data-role="ejmpassword" data-ej-keydown="keyDown" />
    
        <script>
            function keyDown(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->  
    <input id="password" />
    
        <script>
            $("#password").ejmPassword({
                keyDown: function (args) { //handle the event
                }
            });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" data-ej-keydown="keyDown" />
    
        <script>
            function keyDown(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
    <input id="maskedit" />
    
        <script>
            $("#maskedit").ejmMaskEdit({
                format: "00/00/0000",
                keyDown: function (args) { //handle the event
                }
            });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
        <textarea id="textarea" data-role="ejmtextarea" data-ej-keydown="keyDown"></textarea>
    
        <script>
            function keyDown(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
      <textarea id="textarea"></textarea>
    
        <script>
            $("#textarea").ejmTextArea({
                keyDown: function (args) { //handle the event
                }
            });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
       <input type="number" id="editor" data-role="ejmnumeric" data-ej-keydown="keyDown" />
    
    
        <script>
            function keyDown(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
      <input id="editor" type="number" />
    
        <script>
            $("#editor").ejmTextBox({
                keyDown: function (args) { //handle the event
                }
            });
        </script>

    keyUp

    Event triggers when the KeyUp happens on the control.

    Name Type Description
    argument Object Event parameters.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    value string Returns the value of the control

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="textbox" data-role="ejmtextbox" data-ej-keyup="keyUp" />
    
        <script>
            function keyUp(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="textbox" />
    
        <script>
            $("#textbox").ejmTextBox({
                keyUp: function (args) { //handle the event
                }
            });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="password" data-role="ejmpassword" data-ej-keyup="keyUp" />
    
        <script>
            function keyUp(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
       <input id="password" />
    
        <script>
            $("#password").ejmPassword({
                keyUp: function (args) { //handle the event
                }
            });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" data-ej-keyup="keyUp" />
    
        <script>
            function keyUp(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="maskedit" />
    
        <script>
            $("#maskedit").ejmMaskEdit({
                format: "00/00/0000",
                keyUp: function (args) { //handle the event
                }
            });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
        <textarea id="textarea" data-role="ejmtextarea" data-ej-keyup="keyUp"></textarea>
    
        <script>
            function keyUp(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
       <textarea id="textarea"></textarea>
    
        <script>
            $("#textarea").ejmTextArea({
                keyUp: function (args) { //handle the event
                }
            });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-keyup="keyUp" />
    
    
        <script>
            function keyUp(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
       <input id="editor" type="number" />
    
        <script>
            $("#editor").ejmTextBox({
                keyUp: function (args) { //handle the event
                }
            });
        </script>

    touchEnd

    Event triggers when the TouchEnd happens on the control.

    Name Type Description
    argument Object Event parameters.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    value string Returns the value of the control

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="textbox" data-role="ejmtextbox" data-ej-touchend="touchEnd" />
    
        <script>
            function touchEnd(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
       <input id="textbox" />
    
        <script>
            $("#textbox").ejmTextBox({
                touchEnd: function (args) { //handle the event
                }
            });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="password" data-role="ejmpassword" data-ej-touchend="touchEnd" />
    
        <script>
            function touchEnd(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->; 
       <input id="password" />
        <script>
            $("#password").ejmPassword({
    
                touchEnd: function (args) { //handle the event
    
                }
            });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" data-ej-touchend="touchEnd" />
    
        <script>
            function touchEnd(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
       <input id="maskedit" />
    
        <script>
            $("#maskedit").ejmMaskEdit({
                format: "00/00/0000",
                touchEnd: function (args) { //handle the event
                }
            });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
        <textarea id="textarea" data-role="ejmtextarea" data-ej-touchend="touchEnd"></textarea>
    
        <script>
            function touchEnd(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
       <textarea id="textarea"></textarea>
    
        <script>
            $("#textarea").ejmTextArea({
                touchEnd: function (args) { //handle the event
                }
            });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-touchend="touchEnd" />
    
    
        <script>
            function touchEnd(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
       <input id="editor" type="number" />
    
        <script>
            $("#editor").ejmTextBox({
                touchEnd: function (args) { //handle the event
                }
            });
        </script>

    touchStart

    Event triggers when the TouchStart happens on the control.

    Name Type Description
    argument Object Event parameters.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    value string Returns the value of the control

    Example

    TextBox

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="textbox" data-role="ejmtextbox" data-ej-touchstart="touchStart" />
    
        <script>
            function touchStart(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
       <input id="textbox" />
    
        <script>
            $("#textbox").ejmTextBox({
                touchStart: function (args) { //handle the event
                }
            });
        </script>

    Password

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="password" data-role="ejmpassword" data-ej-touchstart="touchStart" />
    
        <script>
            function touchStart(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="password" />
    
        <script>
            $("#password").ejmPassword({
                touchStart: function (args) { //handle the event
                }
            });
        </script>

    MaskEdit

  • html
  • <!-- Unobtrusive way of rendering -->
       <input id="maskedit" data-role="ejmmaskedit" data-ej-format="00/00/0000" data-ej-touchstart="touchStart" />
    
        <script>
            function touchStart(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
       <input id="maskedit" />
    
        <script>
            $("#maskedit").ejmMaskEdit({
                format: "00/00/0000",
                touchStart: function (args) { //handle the event
                }
            });
        </script>

    TextArea

  • html
  • <!-- Unobtrusive way of rendering -->
        <textarea id="textarea" data-role="ejmtextarea" data-ej-touchstart="touchStart"></textarea>
    
        <script>
            function touchStart(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
       <textarea id="textarea"></textarea>
    
        <script>
            $("#textarea").ejmTextArea({
                touchStart: function (args) { //handle the event
                }
            });
        </script>

    Numeric

  • html
  • <!-- Unobtrusive way of rendering -->
        <input type="number" id="editor" data-role="ejmnumeric" data-ej-touchstart="touchStart" />
    
    
        <script>
            function touchStart(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering --> 
       <input id="editor" type="number" />
    
        <script>
            $("#editor").ejmTextBox({
                touchStart: function (args) { //handle the event
                }
            });
        </script>