Properties with famo.us

Question

When creating an InputSurface, I am unable to get various properties to work, such as autofocus or maxLength.

this.email = new InputSurface({
        classes: ['login-form'],
        content: '',
        size: [300, 40],
        placeholder:'email',
        properties: {
            autofocus:'autofocus',
            maxLength:'5',
            textAlign: 'left'
        }
    });

The rendered div is missing the properties I set.

<input class="famous-surface login-form" placeholder="email" type="text" name="" style="-webkit-transform-origin: 0% 0%; opacity: 0.999999; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 614.5, 273.5, 0, 1); text-align: left; width: 300px; height: 40px;">

Obviously a maxLength for email of 5 is silly, but I was just trying to see if it would work, but I can continue to type well beyond 5, and when the surface is rendered, it is not focused. Any ideas? I looked at the examples/demos but couldn't find one that used either of these properties, or an input surface that was autofocused.

sday · Answer 1 · 2014-04-26T15:57:38.800

As suggested by dmvaldman this is not a feature yet, so the below hack will make it a feature now.

Obviously not a long term solution, but I added a few lines in InputSurface.js, the attributes now get consumed.

First I added the single line assigning _attributes

function InputSurface(options) {
    this._placeholder = options.placeholder || '';
    this._value       = options.value || '';
    this._type        = options.type || 'text';
    this._name        = options.name || '';
    this._attributes = options.attributes || '';

    Surface.apply(this, arguments);
    this.on('click', this.focus.bind(this));
}

Then I added the for-loop consumption part to deploy.

InputSurface.prototype.deploy = function deploy(target) {
    if (this._placeholder !== '') target.placeholder = this._placeholder;
    target.value = this._value;
    target.type = this._type;
    target.name = this._name;

    for (var n in this._attributes) {
        target[n] = this._attributes[n];
    }
};

So now I can do the following:

    this.email = new InputSurface({
        classes: ['login-form'],
        content: '',
        size: [300, 40],
        placeholder:'email',
        attributes: {
            autofocus:'autofocus',
            maxLength:5
        }
    });

Again, I realize modifying core code isn't a long term solution, I just needed something right now, and until someone has an "official" answer, this will work for me.

score 3 · Answer 2 · answered Apr 26 '14 at 15:43

3

The properties object is for CSS properties only, not for HTML attributes, such as maxLength and autoFocus. Famo.us will be supporting generic attributes soon, currently inputSurface only supports placeholder, value, type and name.

answered Apr 26 '14 at 15:43

dmvaldman

413
2
13

Ok, thanks. For now the hack will work best for me since I need both maxLength and autofocus to work which doesn't appear to be possible with css/properties. – sday Apr 26 '14 at 15:56

Properties with famo.us

2 Answers2