Format text fields

[Katy]

Sorry for this stupid question I need to force specific font and size in my text fields (people copy/paste the info there often which results in all kinds of formatting) I was trying to use CSS editor and put there:
textarea {font-size: 12px;
font-family: Arial, Helvetica, sans-serif;}

or

input[type=text] {font-size: 12px;
font-family: Arial, Helvetica, sans-serif;}

But this doesn't work. I need to make sure when they save the form text in the text fields are changed to the required format. Is it possible?

[Nikita Kurguzov]

Dear Katy,
Thank you for the question! It's a good question, but the ultimate answer would depend on the type of field you want to modify - can you tell us more? Single line, multiline, plain text or rich text - all of these play a role. A screenshot of these fields would also help!

[Katy]

Dear Katy,
Thank you for the question! It's a good question, but the ultimate answer would depend on the type of field you want to modify - can you tell us more? Single line, multiline, plain text or rich text - all of these play a role. A screenshot of these fields would also help!

Thank you, Nikita!
The fields are multiple lines of text fields, some are Rich text and some Enhanced rich text type, here is the picture:

5-5-2021 11-24-02 AM.png (50.34 KiB) Viewed 13953 times

[Nikita Kurguzov]

Dear Katy,
I see! But it's not something that can be easily applied to Rich Text - Rich Text already includes style information like font size and font, it's all inside the text itself. Plain text can be styled in any way, as the field contains only text itself, and styles can be applied externally.

[Katy]

Dear Katy,
I see! But it's not something that can be easily applied to Rich Text - Rich Text already includes style information like font size and font, it's all inside the text itself. Plain text can be styled in any way, as the field contains only text itself, and styles can be applied externally.

I see... plain text is not an option as people need to insert tables and bullets into those fields. So there is no script which I can run on submit to change the text format?

[Nikita Kurguzov]

Dear Katy,
I can't say that there isn't - it depends on how much time, experience and a need to make it work you have, but I've just spent a few hours working on an approximation of what such a script would look like, and every once I thought I was getting closer to a solution - it either stopped working or broke the default functionality of the control. It's definitely not going to be an easy solution.

If you want to look into it, you can get value for the text with the following code:

Code: Select all

var value = fd.field('RichText').value();

This will contain all the text with all the HTML tags and some of the styles. Some styles are included as text, other styles are applied directly to elements, such as <h2>H2 Title</h2> - these have the styles automatically applied based on their type. You can then go through each tag and decide which ones to give your style - you can either work with text directly, or transform into a jQuery object. You can then insert it back into the field as string with the following code:

Code: Select all

fd.field('RichText').value(adjustedValue);

This is where the fun part begins - when are you going to apply these styles? Applying them on change when the user is typing pretty much makes the field unusable. You can try to apply it on unfocus/blur, when the user goes out of the field, but then it can interfere with copying and pasting, and other actions.

The best solution is probably to apply it on button click or before save.

[Nikita Kurguzov]

Dear Katy,
Here's what you can try:

Code: Select all

function adjustFont(value){
  var HTMLElement = $("<div>" + fd.field('RichText').value() + "</div>");
  HTMLElement.find('*').attr('style','color:black; font-size: 12px;font-family: Arial, Helvetica, sans-serif;');
  var textHTML = $('<div>').append(HTMLElement.clone()).html(); 
  textHTML = textHTML.slice(5);
  textHTML = textHTML.slice(0, -6);
  return textHTML;
}

fd.onsubmit(function(){
  var newRichValue = adjustFont(fd.field('RichText').value());
  fd.field('RichText').value(newRichValue);
  return true;
});

[Katy]

Thank you very much, Nikita!!! This works perfectly and changes the text while keeps tables and bolding!
Sorry for giving you so much work and thank you again for helping with the solution!