Dynamically change font size of text entry fields | XM Community
Skip to main content

@Tom_1842 has an answer for this that we worked through over direct messages. It has great use in addressing accessibility issues, so we decided to have him post the solution here publicly.

Tom recently posted some really cool code that allows respondents to add emojis to their text entry. So I asked him if he had any code that will allow the user to change the font size of their text entry and he of course delivered.

For those who are interested, this is an accessibility issue brought up to me by a respondent with vision impairment. It was very hard for them to respond to the open ends because they couldn’t see well what they were typing. They ended up copying and pasting things from Word but it was annoying for them. They asked if they could have more control over the font size to ease text entry. Since my survey is actually a form and not a one time thing I wanted a solution and it’s a solution I plan to implement on open ends moving forward (especially when surveying older adults).
 

A million thanks to Tom for this outstanding solution!

Thanks @bstrahin ! Below is the code to add to the OnReady section of the Text Entry question's JavaScript:

var qid = this.questionId;

jQuery("#"+qid+" .InputText").after("<input type='button' id='increase' value='font+' name='+' />");
jQuery("#"+qid+" .InputText").after("<input type='button' id='decrease' value='font-' name='-' />");

jQuery("#increase").on('click',function(){

var txt = document.getElementById('QR~'+qid);
var fstyle = window.getComputedStyle(txt, null).getPropertyValue('font-size');
var currentSize = parseFloat(fstyle);
txt.style.fontSize = (currentSize + 5) + 'px'

});

jQuery("#decrease").on('click',function(){

var txt = document.getElementById('QR~'+qid);
var fstyle = window.getComputedStyle(txt, null).getPropertyValue('font-size');
var currentSize = parseFloat(fstyle);
txt.style.fontSize = (currentSize - 5) + 'px'

});

If using Multiple Line or Essay, the size of the box will increase when the button is clicked because the height is tied to the font size. This can be tackled by setting the height with pixel size instead, something like the below:

var qid = this.questionId;
var txt = document.getElementById('QR~'+qid);
jQuery(txt).css({"height":"150px"});

 

Great work as always @Tom_1842 & @bstrahin, thank you so much for posting this! 😎

Leave a Reply


Terms & Conditions