[Plugin] Advanced Textbox

0 favourites
From the Asset Store
Forget about default textbox restrictions, you can create sprites atop of the textbox
  • While using the default textbox I always find something missing like: transparent background, margins, etc...

    So I decided to improve it! <img src="smileys/smiley4.gif" border="0" align="middle">

    Other than the normal textbox properties, this one provides also:


    • Background Color: allows you to pick a color for the background.
    • Transparent Background: allows you to disable the background color and have a transparent background.
    • Font: allows you to choose the font to use (like for the label).
    • Font Color: allows you to specify the font color.
    • Borders: allows to toggle the text box borders. If disabled it also remove the border highlight that certain browsers (like chrome) adds to the text input areas.
    • Top/Bottom/Left/Right Margin: allows to specify the distance in pixel that the text should keep from the margins.
    • Horizontal Alignment: allows you to customize the text alignment.
    • Select all on focus: if set to yes, when the textbox get the focus will select all the text inside.


    • On Focus Gain: triggered when the textbox has the focus.
    • On Focus Lost: triggered when the textbox lose the focus.


    • Has Focus: return true if the textbox has the focus.
    • Validate: return true if the textbox content is valid (based on the content type selected).


    • Set Web Font: like for the text object, this allows to use webfonts on the textbox object.
    • Set Background Color: change the background color for the textbox object. It accepts the following color formats:
    • "rgb(0,0,0)": rgb function (remember to always use the quotes)
    • "#FFFFFF": hex color value (remember to always use the quotes)
    • "transparent": string color name
    • Toggle Borders: allows to enable/disable the textbox borders.
    • Scroll Top: scroll to the top line of the textarea.
    • Scroll Bottom: scroll to the bottom line of the textarea.
    • Select All: select the whole content of the textbox.
    • Append Text: append text at the end of the currently existing one.
    • Append New Line Text: append text at the end of the currently existing one in a new line.


    • TextAfter: Get the text after the caret text box's text.
    • TextBefore: Get the text before the caret text box's text.

    I hope you may find this useful for your projects <img src="smileys/smiley1.gif" border="0" align="middle">


  • Pinco

    It might be better to have a behavior for textbox. An advantage is, it could decrease the code size.

    I had made scroll down behavior (for textbox) before.

    Source code

    (Please do not adjust official plugins or behaviors by Ashley)

  • Yes, behaviors could works for that features, but also the css style (I used that until I got bored to copy the css to every textbox).

    I know we shouldn't adjust official plugins, but why rewrite all when it's enough to add few lines? (I know, I'm lazy <img src="smileys/smiley17.gif" border="0" align="middle" />)

  • Version 1.1

    • Added the web fonts support
    • Converted into c2addon
  • Version 1.2

    • Added the "Validate" condition
  • Version 1.3

    • Added the "Set background color" action
    • Added the "Toggle borders" action
  • Version 1.4

    • Added the "Select all on focus" property.
    • Added the "Scroll Top", "Scroll Bottom" and "Select All" actions.
    • Fixed the DOM error of the lost focus event.
  • hi pinco, i appreciate you adv.plugin for textbox. i really need about validation as type. official plugin have 'type' (ex:email) too. i confused how to get True to next action.

    so i try install adv.textbox of you. but when i drag to C2 window, no confirm plugin install confirmed. how that? how to install it?

  • to install it you have just to drag the c2addon file on the construct 2 window and the message to install it will just pop out.

    For me it's working fine, what c2 version are you using?

    In case you are using an older version, you can always open the c2addon file with a zip program and extract the folder inside the "files" folder into the ".../exporters/plugins" folder like for the older packages...

  • Pinco, is there a property that shows where the cursor/caret is?


    "I am ^ typing"

    if I want to be able to insert text at the ^, where the user has put the cursor I need to know what that position is.

    I found this on the net but no idea where to begin

    function setCaretPosition(elemId, caretPos) {

        var elem = document.getElementById(elemId);

        if(elem != null) {

            if(elem.createTextRange) {

                var range = elem.createTextRange();

                range.move('character', caretPos);



            else {

                if(elem.selectionStart) {


                   elem.setSelectionRange(caretPos, caretPos);







  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Pinco,

    I have a capx to explain my issue here


    Do you think it is possible to expose where the caret is within the edit box?

  • Sorry for the delay, lately I've been super busy :(

    Anyways, I'll take a look as soon as I have a moment :)

  • czar

    there you go, now I've added your textafter and textbefore :)

  • cheers. I have been using my own component, I am still hoping ashley will just implement it into the official version as I believe it is useful

  • yes, there are several useful features that were not included into the default component...

    Like the transparent background and the no borders option, I use them a lot since I like to make something more graphical than the standard black line and white background :P

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)