Float Label in pdf

Dec 06, 2018

Copy link to clipboard

Copied

I am trying to make a float label in an iterative pdf form. I currently have this and its not working. Any ideas?

if (!event.value) {

event.value = "For Translated French";

event.target.display = display.noPrint;

} else {

event.target.display = display.visible;

}

// On Focus script:

if (event.target.value==event.target.defaultValue) {

   event.target.value = "";

   event.target.textColor = color.black;

}

// On Blur script:

if (event.target.value=="") {

   event.target.value = event.target.defaultValue;

   event.target.textColor = color.ltGray;

}

TOPICS
Acrobat SDK and JavaScript

Views

135

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Float Label in pdf

Dec 06, 2018

Copy link to clipboard

Copied

I am trying to make a float label in an iterative pdf form. I currently have this and its not working. Any ideas?

if (!event.value) {

event.value = "For Translated French";

event.target.display = display.noPrint;

} else {

event.target.display = display.visible;

}

// On Focus script:

if (event.target.value==event.target.defaultValue) {

   event.target.value = "";

   event.target.textColor = color.black;

}

// On Blur script:

if (event.target.value=="") {

   event.target.value = event.target.defaultValue;

   event.target.textColor = color.ltGray;

}

TOPICS
Acrobat SDK and JavaScript

Views

136

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 06, 2018 0
Dec 06, 2018

Copy link to clipboard

Copied

Please explain what you mean by "float label". And how this code is being used.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 06, 2018 0
Dec 06, 2018

Copy link to clipboard

Copied

A float label is a label that is in the form field that goes away once the field is fill out. ex: Float Labels with CSS | CSS-Tricks

The code is being used in acrobat for to create the float label.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 06, 2018 0
Dec 06, 2018

Copy link to clipboard

Copied

People don't use float labels with PDF forms. That's not to say that you can't make something like this work, but it means you can't assume we know what you are trying and what you expect.

One key problem may be that from your incomplete example I think you may be trying to overlap visible form fields (the label and the main field). Never do that, it just won't work reliably because it is unpredictable which of the two fields gets an event.

If that ISN'T what you are doing please explain what you want to happen, how you plan to make it happen, and what actually happens. If you ARE overlapping visible fields, DON'T.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 06, 2018 0
Dec 06, 2018

Copy link to clipboard

Copied

I just want to do a float label, I'm not sure how to do it, or how to properly code it. If you know a better way I would greatly appreciate it. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 06, 2018 0
Dec 06, 2018

Copy link to clipboard

Copied

CSS Tricks don't translate to PDF... not even a little. There are ways to approximate the effect you link to but you cannot duplicate it. Additionally, the authoring process is going to be quite onerous. Also, the script you have is useless for this task.

My suggestion is that you either rethink your user experience to conform with what Acrobat is natively capable of or hire an expert to approximate the experience of float labels.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 06, 2018 0
Dec 06, 2018

Copy link to clipboard

Copied

Try this.

Add only this code to Custom Format script for the field. It places light gray text in the field when it is empty, but does not affect the value of the field.

if(event.value == "")

{

    event.target.textColor = ["G",.6];

    event.value = "Enter something here"

}

else

{

   // put additional formatting here

    event.target.textColor = color.black;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 06, 2018 1
try67 LATEST
Dec 06, 2018

Copy link to clipboard

Copied

Follow my instructions in that thread I linked to and it will work just fine. You need to set the field's default value to the text you want to show when the field is "empty", of course.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 06, 2018 0
Dec 06, 2018

Copy link to clipboard

Copied

I recognize the second part of the code from my post on this thread (Is there a way to add instructional text to my text field that will disappear when clicked? (PDF For... ), but what's the first part for?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 06, 2018 0
Dec 06, 2018

Copy link to clipboard

Copied

The first part is for what will fill the float label

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 06, 2018 0