Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    5
    Vote Rating
    0
    ahhrrr is on a distinguished road

      0  

    Question [CLOSED-252] Placeholder not working for TextArea on iPad

    [CLOSED-252] Placeholder not working for TextArea on iPad


    Sencha Touch version tested:
    • 0.9 rev 3
    • only default ext-all.css

    Platform tested against:
    • iOS 3.x
    Description:
    • Form fields allow you to configure placeholder text that will be displayed until a user inputs real data. You can specify placeholder text when configuring a new form field. For some reason, placeholder text does not appear in TextArea fields on iPad MobileSafari 3.2. Everything works as expected in desktop Safari (5.0.1) and Google Chrome (6).

    Test Case:

    I started with the Form example distributed with Sencha Touch 0.93. I added placeholder values to two form fields: the 'name' textfield, and the 'bio' textarea:

    Code:
    {
      xtype: 'textfield',
      name : 'name',
      label: 'Name',
      placeholder: 'Test Placeholder',
      autoCapitalize : false
    }
    Code:
    {
      xtype : 'textarea',
      name  : 'bio',
      label : 'Bio',
      placeholder: 'Test Placeholder',
      maxLength : 60,
      maxRows : 10
    }
    Full code at: http://gist.github.com/562798

    Steps to reproduce the problem:
    • Add placeholder value to textarea field

    The result that was expected:
    • Field should prepopulate with value specified by placeholder

    The result that occurs instead:
    • The textarea is blank

    Screenshot or Video:
    • Textfield success on iPad:
    • Failing TextArea on iPad Simulator:
    • Working in Chrome:

    Debugging already done:
    • I tried re-assigning the property to the component and calling doLayout() on the fieldset, but that doesn't seem to work either.

    Possible fix:
    • Since it is rendering correctly on desktop WebKit, I'm not sure – maybe a CSS issue?

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,657
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I think it's a bug in the browser:

    Code:
    Ext.setup({
        onReady: function(){
            var ta = document.createElement('textarea');
            ta.placeholder = 'foo';
            document.body.appendChild(ta);
        }
    });
    I can confirm that it works ok on the desktop version. As such I don't think it's something we can fix so I'll close it off. Thanks for the detailed report.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    2
    Vote Rating
    0
    mackalicious is on a distinguished road

      0  

    Default


    I ran into a similar problem.

    It looks like Sencha 0.93 has switched to calling the property 'placeHolder' instead of 'placeholder'. It also looks like the switch wasn't properly implemented in TextArea. If you look at renderTpl for Ext.form.Field, you'll see this line:

    '<tpl if="placeHolder">placeholder="{placeHolder}" </tpl>',

    Whereas in Ext.form.TextArea it is:

    '<tpl if="placeholder">placeholder="{placeholder}" </tpl>',

    My temporary fix is to override TextArea's renderTpl with my own copy, which is the same as the source code but with the 'placeHolder' properly capitalized. Works for me now.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,657
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Correct, there was a typo which has since been fixed, however on my iPad the placeholder never shows up,where using a TextArea object or just creating it normally like above.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Similar Threads

  1. Zoom pages on iPad I am feeling left out by my iPad.
    By inagaki622 in forum Japanese Sencha Forum
    Replies: 3
    Last Post: 14 Jun 2011, 5:09 AM
  2. [CLOSED] placeHolder vs. placeholder
    By Ralph Haygood in forum Sencha Touch 1.x: Bugs
    Replies: 3
    Last Post: 18 Aug 2010, 9:49 AM
  3. Zoom pages on iPad I am feeling left out by my iPad.
    By inagaki622 in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 9 Aug 2010, 4:21 AM
  4. [CLOSED][3.0.3] Corrupt placeholder-bar
    By defcon1 in forum Ext 3.x: Bugs
    Replies: 6
    Last Post: 17 Nov 2009, 2:11 AM

Thread Participants: 2