2
\$\begingroup\$

I'm currently working on a complete overhaul of the CSS of our flagship product with a goal of maintainability and simplification. During the testing, my coworkers and I have found that a lot of pages aren't exactly coping well with extremely long user-defined values, leading to things like long scrollbars, buttons being pushed outside the visible area, text escaping the boundaries of labels,...

In order to quickly enter data like this in an input, I've written a bookmarklet that automatically fills the focused element with w-padded numbers, incrementing by 10, up to the maxLength defined on the element. I chose the letter w because it's the widest letter in the English alphabet, so a value that for up to 80% consists of the letter w should be close to the worst-case scenario for display issues.

The bookmarklet is as follows:

javascript:(function(){var focused=document.activeElement; if(focused&&focused.maxLength){ var focusedMaxLength=focused.maxLength,focusedText="",i=10; for(;focusedMaxLength>=i;i+=10){ focusedText+=("wwwwwwwwwww"+i).slice(-10); } focused.value=focusedText.slice(0,focusedMaxLength); }})()

Version with whitespace:

javascript:(function(){
    var focused=document.activeElement;
    if(focused&&focused.maxLength){
        var focusedMaxLength=focused.maxLength,focusedText="",i=10;
        for(;focusedMaxLength>=i;i+=10){
            focusedText+=("wwwwwwwwwww"+i).slice(-10);
        }
        focused.value=focusedText.slice(0,focusedMaxLength);
     }
 })()

An example of the string this generates: wwwwwwww10wwwwwwww20wwwwwwww30wwwwwwww40wwwwwwww50 in a field that's 50 characters long.

Any remarks on how this bookmarklet could be optimized or potential issues that could arise from using this bookmark are appreciated.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.