›

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Categories

[SOLVED] Textinput macro - limit characters?

carlywightcarlywight
edited June 2014 in Help! with 1.x
Hi!
I'm using a version of HarmlessTrouble's textinput macro (google group - ) in 1.4.1, Sugarcane to set a variable for the player's name which I can successfully call later.
What i'd like to do is limit the number of characters which can be entered. I've tried the 'maxlength' addition (in the css first, then I tried to modify the macro...same result) but all that does is change the physical size of the box, not limit the characters.

Any other suggestions of what I could try? This is the macro i'm using:
try {
version.extensions['textinput'] = {
major:1, minor:1, revision:1
};
macros['textinput'] = {
handler: function(place, macroName, params, parser) {
v = params[0].replace("$","");
var input= document.createElement('input');
input.type = "text";
d = v+"TextInput";
input.id = d;
input.name = v;
input.addEventListener('keyup', function()
{
state.history[0].variables[this.name] = this.value;
});
place.appendChild(input);
},
init: function() { var v; var d;},
};
} catch(e) {
throwError(place,"textinput Setup Error: "+e.message);
}
EDIT: Included more detail.
EDIT2: Marked as solved.

Comments

  • greyelfgreyelf
    The maxlength attribute is the correct one to use to limit the number of characters that can be entered into a text input.
    As far as I know there is no CSS equivalent, but I could be wrong, it would not be the first time nor the last. *smile*

    Create a html file containing the following code example to see it work.
    The field will only allow 10 characters even though it looks like it could hold more:

    <!DOCTYPE html>
    <html>
    <head><title>Input maxlength example</title>
    </head>
    <body><input type="text" name="player_name" maxlength="10"></body>
    </html>
    (NOTE: I know that it is missing a form tag, it is not needed in this example)

    Which browser (brand / version) and OS where you using to test on?
  • carlywightcarlywight
    Thanks for getting back so quickly greyelf! :)
    Your html certainly works. I'm actually using the macro to set a variable, which I will edit my original post to mention. The passage where the input field is located is simply using
    <<textinput $name>>
    I'm then styling it in CSS
    input, button {
    background-color: #292623;
    color: #FFFFFF;
    font-size: 1em;
    text-align: center;
    font-family: 'IM Fell Double Pica SC', serif;
    }

    input[type="text"] {
    border: 1px solid #3D3932;
    width: 70%;
    }
    I thought i'd be able to add the maxlength="10" attribute in the macro like this
    try {
    version.extensions['textinput'] = {
    major:1, minor:1, revision:1
    };
    macros['textinput'] = {
    handler: function(place, macroName, params, parser) {
    v = params[0].replace("$","");
    var input= document.createElement('input');
    input.type = "text";
    maxlength = "10";
    d = v+"TextInput";
    input.id = d;
    input.name = v;
    input.addEventListener('keyup', function()
    {
    state.history[0].variables[this.name] = this.value;
    });
    place.appendChild(input);
    },
    init: function() { var v; var d;},
    };
    } catch(e) {
    throwError(place,"textinput Setup Error: "+e.message);
    }
    but that doesn't seem to do anything; it still prints like the below when I look at the html in Firebug.
    <input id="nameTextInput" type="text" name="name">
    Using find and replace in Dreamweaver I can't even find "type="text""; I was hoping i'd be able to modify the built html but no dice.


    To test my previous failed attempts i've used the latest versions of Firefox and Chrome on Windows, Safari on Mac OSX and Safari on both an iPad Air and iPhone 4s.
  • greyelfgreyelf
    The is two small errors in your macro:

    1. In java-script the property is named maxLength, note uppercase 'L' and case is important in java-script.
    2. You forgot to indicate which object the property belongs to. eg. forgot the input. part

    So change the line maxlength = "10"; in your macro to be input.maxLength = "10"; and it should work.

    I have attached an example TWS
  • carlywightcarlywight
    greyelf wrote:

    The is two small errors in your macro:

    1. In java-script the property is named maxLength, note uppercase 'L' and case is important in java-script.
    2. You forgot to indicate which object the property belongs to. eg. forgot the input. part

    So change the line maxlength = "10"; in your macro to be input.maxLength = "10"; and it should work.

    I have attached an example TWS


    I just embarrassed myself in front of 9 other people (guys...i'm the only girl in here!) by flailing my hands around in the air then hugging myself.

    ...it works.
    And you, my friend, are a legend.
  • greyelfgreyelf
    LOL, happy to help.
Sign In or Register to comment.