Change the text box size using bookmarklet

Question

Form text area resizer is a bookmarklet that will allow the user to change the size of textarea. Eg

javascript: (function() {
    var i, x;
    for (i = 0; x = document.getElementsByTagName("textarea")[i]; ++i) x.rows += 5;
})()

But I am looking for a bookmarklet that will allow me to change the size of text box. Eg on the following page I will like to increase the size of name and email input boxes.

Answer 1

From what I know there is no way to do this. One could use CSS resize:both; overflow: auto; resize:both; overflow: auto; , but this does not seem to work in various browsers. (Perhaps I'm doing something wrong ).

One way could be to replace all input fields with a dirty copy, but this seems to be a candidate for breaking existing scripts (native to the page etc.). As an example the element is no longer going to be of type "text" and if native script rely on this, it gets broken. Event listeners would be broken, etc.

Anyhow, if one still want to, a quick first draft could perhaps be something like this :

(function() {
    var x, n, i = 0,
        t = document.createElement('TEXTAREA');
    t.rows = 3;
    while ((x = document.getElementsByTagName('INPUT')[i])) {
        if (x.type === "text") {
            n = x.parentNode.insertBefore(t.cloneNode(), x);
            x.parentNode.removeChild(x); 
            n.id = x.id;   
            n.name = x.name;
            n.innerText = x.value;
        } else { 
            ++i;   
        }
    }
})();

Or as bookmarklet:

javascript:(function(){var x,n,i=0,t=document.createElement("TEXTAREA");t.rows=3;while((x=document.getElementsByTagName("INPUT")[i]))if(x.type==="text"){n=x.parentNode.insertBefore(t.cloneNode(),x);x.parentNode.removeChild(x);n.id=x.id;n.name=x.name;n.innerText=x.value}else++i})();

Answer 2

这以我想要的方式更改了输入字段：

javascript:(function(){var%20i,x;%20for(i=0;x=document.getElementsByTagName("INPUT")[i];++i)%20x.size%20+=%2035;%20})()

Answer 3

I think the way you are approaching it is not the best way. Your bookmarklet function should call some external JavaScript and you should place all your logic in that script. In that case debugging the script should be easier for you.

Consider this Sample Code:

<a href="javascript:(function(){  script=document.createElement('SCRIPT');script.src='http://path/to/your/JS';document.body.appendChild(script);})()"> This is a sample bookmarklet </a>

So now the global JS file you are including should contain your JS and all the logic. Once you have done it do the above steps with the plugin. This time insert break points at desired locations to debug your code.