Feature #37496

placeholder attribute in textarea-viewhelper

Added by Martin Hummer about 3 years ago. Updated over 2 years ago.

Status:Closed Start date:2012-05-25
Priority:Should have Due date:
Assigned To:- % Done:

0%
Category:ViewHelpers
Target version:-
Has patch:No

Description

hello,

i just discovered that the placeholder attribute in the textarea viewhelper is missing.
the following code adds the placeholder according to the textfield viewhelper:

    /**
     * Renders the textarea.
     *
     * @param string $placeholder A string used as a placeholder for the value to enter
     *
     * @return string
     * @api
     */
    public function render($placeholder = NULL) {
        $name = $this->getName();
        $this->registerFieldNameForFormTokenGeneration($name);

        $this->tag->forceClosingTag(TRUE);
        $this->tag->addAttribute('name', $name);
        $this->tag->setContent(htmlspecialchars($this->getValue()));

        if ($placeholder !== NULL) {
            $this->tag->addAttribute('placeholder', $placeholder);
        }

        $this->setErrorClassAttribute();

        return $this->tag->render();
    }
}

Related issues

related to TYPO3.Fluid - Task #37558: Form.Textfield ViewHelper's placeholder attribute should ... Resolved 2012-05-29

History

#1 Updated by Martin Hummer about 3 years ago

  • Assigned To deleted (Martin Hummer)

#2 Updated by Adrian Föder about 3 years ago

  • Status changed from New to Closed

you can easily add arbitrary attributes with the additionalAttributes attribute; this goes for every tag based ViewHelper. Usage is, for example:

1<f:form.textarea additionalAttributes="{placeholder: 'Search...'}" />

outputs
1<textarea placeholder="Search..." />

I'll close this issue, feel free to add comments or reopen if you need further information.

#3 Updated by Martin Hummer about 3 years ago

thanks for this hint!
i saw the placeholder-argument for the textfield-viewhelper and thought that this is missing for textarea-viewhelper.

additionalArguments solves this problem entirely.
thanks adrian!

#4 Updated by Lorenz Ulrich over 2 years ago

Unfortunately Adrian's solution is not working in case you want to get the placeholder from a variable:

<f:form.textarea placeholder="{myValue}">

would work (if enabled), but

<f:form.textarea additionalAttributes="{placeholder: {myValue}}">

won't work because it violates the syntax. So I think we need a solution for this.

#5 Updated by Adrian Föder over 2 years ago

Lorenz, you are nearly at the correct solutionm, which will be

<f:form.textarea additionalAttributes="{placeholder: myValue}" />

#6 Updated by Lorenz Ulrich over 2 years ago

Stuipd me, you're right of course. Thank you!

#7 Updated by Matthias Wehrlein over 2 years ago

  • Status changed from Closed to New

Why has this been closed with just a workaround provided?

The placeholder attribute should be supported out of the box, it's valid and nowadays more and more used.

In addition — to my knowledge — there's no way to do more complicated string operations inside the additionalAttributes construct.

I had a case where I wanted to append an asterisk to the placeholder text. Something along the lines of this:

{namespace vh=Tx_Powermail_ViewHelpers}

<div id="powermail_fieldwrap_{field.uid}" class="powermail_fieldwrap powermail_fieldwrap_textarea powermail_fieldwrap_{field.uid} {field.css}">
    <label for="powermail_field_{field.marker}" class="powermail_label">
        <vh:string.RawAndRemoveXss>{field.title}</vh:string.RawAndRemoveXss><f:if condition="{field.mandatory}"><span class="mandatory">*</span></f:if>
    </label>
    <f:if condition="{field.mandatory}">
        <f:then>
            <f:form.textarea cols="20" rows="5" id="powermail_field_{field.marker}" name="field[{field.uid}]" value="{vh:Misc.PrefillField(field: '{field}')}" class="powermail_field powermail_textarea {vh:Misc.ValidationClass(field: '{field}')}" additionalAttributes="{placeholder:field.title + '*'}" />
        </f:then>
        <f:else>
            <f:form.textarea cols="20" rows="5" id="powermail_field_{field.marker}" name="field[{field.uid}]" value="{vh:Misc.PrefillField(field: '{field}')}" class="powermail_field powermail_textarea {vh:Misc.ValidationClass(field: '{field}')}" additionalAttributes="{placeholder:field.title}" />
        </f:else>
    </f:if>
</div>

Ain't possible right now. But I could have solved this with "native" placeholder support for textareas. Like I can do with regular text inputs:

{namespace vh=Tx_Powermail_ViewHelpers}

<div id="powermail_fieldwrap_{field.uid}" class="powermail_fieldwrap powermail_fieldwrap_input powermail_fieldwrap_{field.uid} {field.css}">
    <label for="powermail_field_{field.marker}" class="powermail_label">
        <vh:string.RawAndRemoveXss>{field.title}</vh:string.RawAndRemoveXss><f:if condition="{field.mandatory}"><span class="mandatory">*</span></f:if>
    </label>

    <f:if condition="{field.mandatory}">
        <f:then>
            <f:form.textfield id="powermail_field_{field.marker}" name="field[{field.uid}]" value="{vh:Misc.PrefillField(field: '{field}')}" class="powermail_field powermail_input {vh:Misc.ValidationClass(field: '{field}')} {vh:Misc.ErrorClass(field: '{field}', class: 'powermail_field_error')}" placeholder="{field.title}*" required="{field.mandatory}" />
        </f:then>
        <f:else>
            <f:form.textfield id="powermail_field_{field.marker}" name="field[{field.uid}]" value="{vh:Misc.PrefillField(field: '{field}')}" class="powermail_field powermail_input {vh:Misc.ValidationClass(field: '{field}')} {vh:Misc.ErrorClass(field: '{field}', class: 'powermail_field_error')}" placeholder="{field.title}" />
        </f:else>
    </f:if>
</div>

#8 Updated by Matthias Wehrlein over 2 years ago

  • % Done changed from 100 to 0

#9 Updated by Bastian Waidelich over 2 years ago

Matthias Wehrlein wrote:

In addition — to my knowledge — there's no way to do more complicated string operations inside the additionalAttributes construct.

FYI, yes that is possible:

1<f:form.textarea cols="20" rows="5" id="powermail_field_{field.marker}" name="field[{field.uid}]" value="{vh:Misc.PrefillField(field: '{field}')}" class="powermail_field powermail_textarea {vh:Misc.ValidationClass(field: '{field}')}" additionalAttributes="{placeholder: '{field.title}*'}" />

But I agree: HTML5 has become a standard now, we should update the form viewhelpers to reflect that (but not only for the placeholder attribute)

#10 Updated by Adrian Föder over 2 years ago

  • Status changed from New to Closed

it's "coincidentally" resolved with https://review.typo3.org/#/c/17684/ right?

Feel free to reopen if I missed something.

#11 Updated by Bastian Waidelich over 2 years ago

Adrian Föder wrote:

it's "coincidentally" resolved with https://review.typo3.org/#/c/17684/ right?

Right, thanks Adrian ;)

Also available in: Atom PDF