VL-Web placeholders and Google/Mozilla auto fill

[atostaine]

I have a customer whose main website is built using Wix. VL-Web components are placed within the main site.

Wix placeholders will stay visible in the entry box even after the user clicks there. Lansa's do not. Is there an option to turn that on?

Also, if the user is asked to fill in his name, google chrome and mozilla will both offer to autofill the fields. This doesn't work for any of our VL-Web forms. How do we get that to work?

Thanks, Art

[jyoung]

Hey Art,

My hunch would be that Wix is using HTML5 element types. Unfortunately I don't think LANSA gives us the option on controlling the rendered element type.

I would inspect the Wix element with something like Chrome's Dev Tools.

You will likely find something like this. Notice the placeholder and autocomplete attributes.

Code: Select all

<input type="text" placeholder="First Name" autocomplete="given-name" name="name">

If you look at LANSA's version you get something like this

Code: Select all

<input spellcheck="false" type="text" tabindex="0" style="padding: 0px; white-space: normal; background: rgba(0, 0, 0, 0); position: absolute; overflow: auto; box-sizing: border-box; border-style: none; outline: none; border-width: 0px; cursor: text; resize: none; left: 3px; width: 261px; height: 23px; text-align: left; font-family: verdana, verdana; font-size: 9pt; font-weight: normal; font-style: normal; text-decoration: none; top: 1px; color: rgb(48, 48, 48);">

Its a raw input element and things like the placeholder are controlled by it's Javascript engine. (As far as I know at least).
In fact right below that input element is a div with the placeholder defined.

Code: Select all

<div contenteditable="true" style="z-index: -1; position: absolute; top: 4px; left: 2px; background: rgba(0, 0, 0, 0); color: rgb(192, 192, 192); overflow: hidden; box-sizing: border-box; border-style: solid; outline: none; border-width: 0px; text-overflow: ellipsis; font-family: verdana, verdana; font-size: 9pt; font-weight: normal; font-style: normal; text-decoration: none; width: 261px; height: 15px;">First Name</div>

Regarding the autocomplete, check out this post on StackOverflow. https://stackoverflow.com/questions/722 ... 6#41965106.

You still need to have the HTML5 based elements though.

That being said, one way to work around it is to create a widget and render the input yourself.

Code: Select all

  //
  // 'onRealizeControl' - gets called when LANSA creates a visual representation of the widget.
  //
  // Parameters:
  //
  // - parentDiv : the div that's been created as a container for this control.
  //
  PROTOTYPE.onRealizeControl = function( parentDiv )
  {
    // Provide the code to visualize the widget, FOR EXAMPLE...
    var input = document.createElement("input");
    input.type = "text";
    input.placeholder = "First Name";
    input.autocomplete = "given-name";
    input.name = "name";

    parentDiv.appendChild( input );
  }

You could invest some time on the widget defining methods, properties etc to get a handy reusable widget for your inputs, but that starts to get into the "is it worth it" argument.

Hope this helps,
- Joe

[atostaine]

Thanks for the post Joe lots of information. YUCK! I'll ask for an enhancement because I don't know Web like you.

I'll try to use the widget for the name and email fields.

[jyoung]

Yeah, an enhancement that would allow us to have better control of the rendering of form inputs would be nice.

Its nice not having to worry about this minutia but there are times when you have to and it would be nice to have that extra flexability.

BTW, this is the link to Google's docs that was referenced in the SO post: https://developers.google.com/web/funda ... ute_values

Good info if you are so inclined.

[BrendanB]

I have had some success with naming vars correctly.

Example:

for your input boxes, ensure that the name is 'username' and 'password'.

Chrome will see the 'name' attribute and will offer to save username/password for the site (or autofill if you have saved before).

I suspect as long as the name matches, you dont really need the autocomplete value, although i agree, that would be a nice enhancement.

[atostaine]

According to the docs, the placeholder should stay until the user begins typing. This isn't what we are seeing

https://docs.lansa.com/14/en/lansa016/p ... holder.htm

The Placeholder property defines the caption to be shown in an edit when it is empty.
Placeholders are commonly seen on input screens and will disappear the moment a value is entered into the edit.

I submitted an incident to support in N.America