[Plugin] Advanced Textbox

Post your completed addons to share with the community

Post » Wed Apr 17, 2013 3:21 pm

While using the default textbox I always find something missing like: transparent background, margins, etc...
So I decided to improve it!

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

PROPERTIES:

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


TRIGGERS:

- On Focus Gain: triggered when the textbox has the focus.

- On Focus Lost: triggered when the textbox lose the focus.


CONDITIONS:

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


ACTIONS:

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


EXPRESSIONS:

- 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

DownloadPinco2014-01-27 15:24:23
B
11
S
3
G
1
Posts: 35
Reputation: 1,832

Post » Wed Apr 17, 2013 4:03 pm

@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)rexrainbow2013-04-17 16:04:29
B
97
S
22
G
178
Posts: 4,121
Reputation: 104,049

Post » Wed Apr 17, 2013 4:45 pm

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 )
B
11
S
3
G
1
Posts: 35
Reputation: 1,832

Post » Wed May 01, 2013 2:53 pm

Version 1.1

- Added the web fonts support
- Converted into c2addonPinco2013-05-01 16:32:22
B
11
S
3
G
1
Posts: 35
Reputation: 1,832

Post » Thu May 02, 2013 1:28 pm

Version 1.2

- Added the "Validate" condition
B
11
S
3
G
1
Posts: 35
Reputation: 1,832

Post » Thu May 02, 2013 2:08 pm

Version 1.3

- Added the "Set background color" action
- Added the "Toggle borders" action
B
11
S
3
G
1
Posts: 35
Reputation: 1,832

Post » Fri May 03, 2013 10:05 pm

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.
B
11
S
3
G
1
Posts: 35
Reputation: 1,832

Post » Sat May 04, 2013 4:00 am

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?
B
7
S
2
G
3
Posts: 13
Reputation: 2,266

Post » Sat May 04, 2013 8:21 am

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...Pinco2013-05-04 08:23:08
B
11
S
3
G
1
Posts: 35
Reputation: 1,832

Post » Thu Aug 08, 2013 5:36 am

@pinco, is there a property that shows where the cursor/caret is?

e.g.,

"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);
            range.select();
        }
        else {
            if(elem.selectionStart) {
               elem.focus();
               elem.setSelectionRange(caretPos, caretPos);
            }
            else
               elem.focus();
        }
    }
}czar2013-08-08 06:41:27
B
31
S
8
G
5
Posts: 436
Reputation: 5,836

Next

Return to Completed Addons

Who is online

Users browsing this forum: No registered users and 3 guests