Greasy Fork is available in English.

Resizeable Text Fields

Based on Resizeable Textarea 0.1 (https://addons.mozilla.org/de/firefox/addon/3818), original coding by Raik Jürgens. Added support for select lists and horizontal resizing of input fields by Florian Höch. Should now work on all page types (XML/XHTML/you-name-it).

// ==UserScript==
// @name           Resizeable Text Fields
// @namespace      http://userscripts.org/scripts/show/42433
// @description    Based on Resizeable Textarea 0.1 (https://addons.mozilla.org/de/firefox/addon/3818), original coding by Raik Jürgens. Added support for select lists and horizontal resizing of input fields by Florian Höch. Should now work on all page types (XML/XHTML/you-name-it).
// @include        *
// @version 0.0.1.20140904104754
// ==/UserScript==

window.resizeableTF =
{
	loaded: false,
	TF: [],
	TF_names: [],
	TF_lineheights: [],
	TF_tags: {
		/*
			directions:
			0 = determine on runtime by looking at size attribute
			1 = only horizontal
			2 = horizontal & vertical
		*/
		'input': {
			directions: 1,
			types: ['text', 'password']
		},
		'pre': {
			directions: 2
		},
		'select': {
			directions: 0
		},
		'textarea': {
			directions: 2
		}
	},

	pageload: function (e) {
		if (!resizeableTF.loaded) {
			resizeableTF.doc = document;
			resizeableTF.rootElem = resizeableTF.doc.getElementsByTagName('body')[0] || resizeableTF.doc.documentElement;
		}
		var TF = []
		for (var tagName in resizeableTF.TF_tags) {
			TF = TF.concat(Array.prototype.slice.call(resizeableTF.doc.getElementsByTagName(tagName)));
		}
		if (TF.length) {
			var i = TF.length, k = resizeableTF.TF.length, curTF_Nr;
			while (i--) {
				var TF_tag = resizeableTF.TF_tags[TF[i].tagName.toLowerCase()]
				if ((TF_tag && (!TF_tag.types || TF_tag.types.indexOf(TF[i].type) > -1)) && (!resizeableTF.loaded || resizeableTF.TF_names.indexOf(TF[i].name) < 0)) {
					resizeableTF.TF[k] = TF[i];
					resizeableTF.TF_names[k] = TF[i].name;
					resizeableTF.TF_lineheights[k] = resizeableTF.getlineheight(TF[i]);
					resizeableTF.newdiv('5' , '1' , 'resizeableTFgripH_', k, 'w' ).addEventListener('mouseout', resizeableTF.hidediv, false);
					if (TF_tag.directions == 2 || (TF_tag.directions == 0 && TF[i].size > 1)) {
						resizeableTF.newdiv('1' , '5' , 'resizeableTFgripV_', k, 'n' ).addEventListener('mouseout', resizeableTF.hidediv, false);
						resizeableTF.newdiv('10', '5', 'resizeableTFgripX_', k, 'se').addEventListener('mouseout', resizeableTF.hidediv, false);
					}
					resizeableTF.TF[k].addEventListener('mousemove', new Function('if (!resizeableTF.isresizing && resizeableTF.curTF_Nr !== ' + k + ') { resizeableTF.curTF_Nr = ' + k + '; resizeableTF.posdiv() }'), false);
					resizeableTF.TF[k].addEventListener('mouseout', resizeableTF.hidediv, false);
					k++;
				}
			}
			if (!resizeableTF.loaded) {
				resizeableTF.newdiv('0', '0', 'resizeableTFshowCursor', '', 'w');
				resizeableTF.CursorDiv = resizeableTF.doc.getElementById('resizeableTFshowCursor');
				resizeableTF.CursorDiv.removeEventListener('mousedown', resizeableTF.activate, true);
				window.addEventListener('resize', resizeableTF.hidedivs, true);
				window.addEventListener('scroll', resizeableTF.hidedivs, true);
			}
		}
		resizeableTF.loaded = true;
	},

	newdiv: function (w, h, id, nr, cu) {
		var grip = this.rootElem.namespaceURI ? this.doc.createElementNS(this.rootElem.namespaceURI, 'div') : this.doc.createElement('div');
		grip.setAttribute('id', id + nr);
		grip.setAttribute('style', 'display: none; border: none; font-size: 1px; line-height: 1px; margin: 0; padding: 0; position: fixed; width: ' + w + 'px; height: ' + h + 'px; cursor: ' + cu + '-resize; left: 0; top: 0; z-index: 2147483647;'); // max possible z-index value 2^32/2-1
		grip.addEventListener('mousedown', this.activate, true);
		this.rootElem.appendChild(grip);
		return grip;
	},

	getpositionabs: function (k, elem) {
		var curElem = elem || this.TF[k];
		var curX = curElem.offsetLeft;
		while (curElem.offsetParent) {
			curX += Math.abs(curElem.offsetParent.offsetLeft) + (curElem.offsetParent.tagName.toLowerCase() != 'table' ? curElem.offsetParent.clientLeft : 0) - curElem.offsetParent.scrollLeft;
			// Math.abs needed for <body> which returns negative offset if it has a border (NOT ok - should be positive)
			// curElem.offsetParent.clientLeft not needed for tables (cell offsetLeft already contains table clientLeft)
			curElem = curElem.offsetParent;
		}
		if (curElem != document.documentElement) curX += document.documentElement.offsetLeft; // <html> returns negative offset if it has a border (OK)
		curElem = elem || this.TF[k];
		var curY = curElem.offsetTop;
		while (curElem.offsetParent) {
			curY += Math.abs(curElem.offsetParent.offsetTop) + (curElem.offsetParent.tagName.toLowerCase() != 'table' ? curElem.offsetParent.clientTop : 0) - curElem.offsetParent.scrollTop;
			// Math.abs needed for <body> which returns negative offset if it has a border (NOT ok - should be positive)
			// curElem.offsetParent.clientTop not needed for tables (cell offsetTop already contains table clientTop)
			curElem = curElem.offsetParent;
		}
		if (curElem != document.documentElement) curY += document.documentElement.offsetTop; // <html> returns negative offset if it has a border (OK)
		return [curX, curY];
	},

	getposition: function (k, elem) {
		var curElem = elem || this.TF[k];
		var curX = curElem.offsetLeft;
		while (curElem.offsetParent) {
			curX += Math.abs(curElem.offsetParent.offsetLeft) + (curElem.offsetParent.tagName.toLowerCase() != 'table' ? curElem.offsetParent.clientLeft : 0) - curElem.offsetParent.scrollLeft;
			// Math.abs needed for <body> which returns negative offset if it has a border (NOT ok - should be positive)
			// curElem.offsetParent.clientLeft not needed for tables (cell offsetLeft already contains table clientLeft)
			curElem = curElem.offsetParent;
		}
		if (curElem != document.documentElement) curX -= document.documentElement.scrollLeft;
		curElem = elem || this.TF[k];
		var curY = curElem.offsetTop;
		while (curElem.offsetParent) {
			curY += Math.abs(curElem.offsetParent.offsetTop) + (curElem.offsetParent.tagName.toLowerCase() != 'table' ? curElem.offsetParent.clientTop : 0) - curElem.offsetParent.scrollTop;
			// Math.abs needed for <body> which returns negative offset if it has a border (NOT ok - should be positive)
			// curElem.offsetParent.clientTop not needed for tables (cell offsetTop already contains table clientTop)
			curElem = curElem.offsetParent;
		}
		if (curElem != document.documentElement) curY -= document.documentElement.scrollTop;
		return [curX, curY];
	},

	getdimensions: function (elem) {
		if (document.compatMode == 'BackCompat' || elem.tagName.toLowerCase() == 'select') {
			var w = elem.offsetWidth;
			var h = elem.offsetHeight;
		}
		else {
			var style = document.defaultView.getComputedStyle(elem, null);
			var w = parseFloat(style.width);
			var h = parseFloat(style.height);
			if (elem.tagName.toLowerCase() == 'td' || elem.tagName.toLowerCase() == 'th') {
				// w += parseFloat(style.paddingLeft);
				// w += parseFloat(style.paddingRight);
				h += parseFloat(style.paddingTop);
				h += parseFloat(style.paddingBottom);
			}
		}
		return [w, h];
	},

	getlineheight: function (elem) {
		var style = document.defaultView.getComputedStyle(elem, null);
		return parseFloat(style.lineHeight);
	},

	posdiv: function (e) {
		resizeableTF.isshown = true;
		var k = resizeableTF.curTF_Nr, hx, hy, hh, vx, vy, vw, xx, xy;
		var curPos = resizeableTF.getposition(k);
		resizeableTF.doc.getElementById('resizeableTFgripH_' + k).style.left        = hx = (curPos[0] + resizeableTF.TF[k].offsetWidth  -  5) + 'px';
		resizeableTF.doc.getElementById('resizeableTFgripH_' + k).style.top         = hy = (curPos[1]                                       ) + 'px';
		var TF_tag = resizeableTF.TF_tags[resizeableTF.TF[k].tagName.toLowerCase()];
		if (TF_tag.directions == 2 || (TF_tag.directions == 0 && resizeableTF.TF[k].size > 1)) {
			resizeableTF.doc.getElementById('resizeableTFgripH_' + k).style.height  = hh = (            resizeableTF.TF[k].offsetHeight -  5) + 'px';
			resizeableTF.doc.getElementById('resizeableTFgripV_' + k).style.left    = vx = (curPos[0]                                       ) + 'px';
			resizeableTF.doc.getElementById('resizeableTFgripV_' + k).style.top     = vy = (curPos[1] + resizeableTF.TF[k].offsetHeight -  5) + 'px';
			resizeableTF.doc.getElementById('resizeableTFgripV_' + k).style.width   = vw = (            resizeableTF.TF[k].offsetWidth  - 10) + 'px';
			resizeableTF.doc.getElementById('resizeableTFgripV_' + k).style.display = 'block';
			resizeableTF.doc.getElementById('resizeableTFgripX_' + k).style.left    = xx = (curPos[0] + resizeableTF.TF[k].offsetWidth  - 10) + 'px';
			resizeableTF.doc.getElementById('resizeableTFgripX_' + k).style.top     = xy = (curPos[1] + resizeableTF.TF[k].offsetHeight -  5) + 'px';
			resizeableTF.doc.getElementById('resizeableTFgripX_' + k).style.display = 'block';
		}
		else {
			resizeableTF.doc.getElementById('resizeableTFgripH_' + k).style.height  = hh =              resizeableTF.TF[k].offsetHeight       + 'px';
		}
		resizeableTF.doc.getElementById('resizeableTFgripH_' + k).style.display     = 'block';
	},

	activate: function (e) {
		resizeableTF.isresizing = true;
		var curTargetId = e.target.getAttribute('id').split('_');
		resizeableTF.curTarget = curTargetId[0];
		resizeableTF.curTF_Nr = parseInt(curTargetId[1]);
		resizeableTF.curTF = resizeableTF.TF[resizeableTF.curTF_Nr];
		var curPos = resizeableTF.getposition(resizeableTF.curTF_Nr),
			curDim = resizeableTF.getdimensions(resizeableTF.curTF);
		resizeableTF.offset = [
			e.pageX - curPos[0] - curDim[0],
			e.pageY - curPos[1] - curDim[1]
		];
		var elem = resizeableTF.curTF.parentNode;
		// if (elem.tagName.toLowerCase() == 'td' || elem.tagName.toLowerCase() == 'th') {
			// while (elem.tagName.toLowerCase() != 'table') elem = elem.parentNode;
		// }
		with (elem.style)
			resizeableTF.storedDim = [minWidth, minHeight, width, height];
		var parDim = resizeableTF.getdimensions(elem)
		elem.style.minWidth  = parDim[0] + 'px';
		elem.style.minHeight = parDim[1] + 'px';
		resizeableTF.doc.addEventListener('mouseup', resizeableTF.deactivate, true);
		switch(resizeableTF.curTarget){
			case 'resizeableTFgripH':
				resizeableTF.doc.addEventListener('mousemove', resizeableTF.resizeta_h, true);
				resizeableTF.doc.addEventListener('draggesture', resizeableTF.cancelEvent, true);
				resizeableTF.doc.addEventListener('dragstart', resizeableTF.cancelEvent, true);
				break;
			case 'resizeableTFgripV':
				resizeableTF.doc.addEventListener('mousemove', resizeableTF.resizeta_v, true);
				resizeableTF.doc.addEventListener('draggesture', resizeableTF.cancelEvent, true);
				resizeableTF.doc.addEventListener('dragstart', resizeableTF.cancelEvent, true);
				break;
			case 'resizeableTFgripX':
				resizeableTF.doc.addEventListener('mousemove', resizeableTF.resizeta_x, true);
				resizeableTF.doc.addEventListener('draggesture', resizeableTF.cancelEvent, true);
				resizeableTF.doc.addEventListener('dragstart', resizeableTF.cancelEvent, true);
				break;
			}
		resizeableTF.CursorDiv.style.width = resizeableTF.rootElem.offsetWidth + 'px';
		resizeableTF.CursorDiv.style.height = resizeableTF.rootElem.offsetHeight + 'px';
		resizeableTF.CursorDiv.style.cursor = e.target.style.cursor;
		resizeableTF.CursorDiv.style.display = 'block';
		resizeableTF.cancelEvent(e);
	},

	deactivate: function () {
		resizeableTF.isresizing = false;
		var elem = resizeableTF.curTF.parentNode;
		// if (elem.tagName.toLowerCase() == 'td' || elem.tagName.toLowerCase() == 'th') {
			// while (elem.tagName.toLowerCase() != 'table') elem = elem.parentNode;
		// }
		elem.style.minWidth  = resizeableTF.storedDim[0];
		elem.style.minHeight = resizeableTF.storedDim[1];
		// elem.style.width     = resizeableTF.storedDim[2];
		// elem.style.height    = resizeableTF.storedDim[3];
		resizeableTF.doc.removeEventListener('mouseup', resizeableTF.deactivate, true);
		resizeableTF.posdiv();
		switch(resizeableTF.curTarget){
			case 'resizeableTFgripH':
				resizeableTF.doc.removeEventListener('mousemove', resizeableTF.resizeta_h, true);
				resizeableTF.doc.removeEventListener('draggesture', resizeableTF.cancelEvent, true);
				resizeableTF.doc.removeEventListener('dragstart', resizeableTF.cancelEvent, true);
				resizeableTF.doc.removeEventListener('select', resizeableTF.cancelEvent, true);
				break;
			case 'resizeableTFgripV':
				resizeableTF.doc.removeEventListener('mousemove', resizeableTF.resizeta_v, true);
				resizeableTF.doc.removeEventListener('draggesture', resizeableTF.cancelEvent, true);
				resizeableTF.doc.removeEventListener('dragstart', resizeableTF.cancelEvent, true);
				resizeableTF.doc.removeEventListener('select', resizeableTF.cancelEvent, true);
				break;
			case 'resizeableTFgripX':
				resizeableTF.doc.removeEventListener('mousemove', resizeableTF.resizeta_x, true);
				resizeableTF.doc.removeEventListener('draggesture', resizeableTF.cancelEvent, true);
				resizeableTF.doc.removeEventListener('dragstart', resizeableTF.cancelEvent, true);
				resizeableTF.doc.removeEventListener('select', resizeableTF.cancelEvent, true);
				break;
		}
		resizeableTF.CursorDiv.style.width = '0';
		resizeableTF.CursorDiv.style.height = '0';
		resizeableTF.CursorDiv.style.display = 'none';
	},

	hidedivs: function () {
		if (resizeableTF.isshown && !resizeableTF.isresizing) {
			var k = resizeableTF.TF.length;
			while (k--) {
				resizeableTF.curTF_Nr = k;
				resizeableTF.hidediv();
			}
			resizeableTF.isshown = false;
		}
	},

	hidediv: function (e) {
		if (resizeableTF.isshown && !resizeableTF.isresizing) {
			try {
				if (e && e.relatedTarget && e.relatedTarget.id && e.relatedTarget.id.indexOf('resizeableTFgrip') == 0) return;
			}
			catch (exception) {
			};
			var k = resizeableTF.curTF_Nr;
			if (k != undefined && !resizeableTF.isresizing) {
				var grip = resizeableTF.doc.getElementById('resizeableTFgripH_' + k);
				grip.style.display = 'none';
				if (grip = resizeableTF.doc.getElementById('resizeableTFgripV_' + k))
					grip.style.display = 'none';
				if (grip = resizeableTF.doc.getElementById('resizeableTFgripX_' + k))
					grip.style.display = 'none';
				resizeableTF.curTF_Nr = undefined;
			}
		}
	},

	cancelEvent: function (e) {
		e.preventDefault();
		e.stopPropagation();
	},

	resizeta_h: function (e) {
		var curPos = resizeableTF.getposition(resizeableTF.curTF_Nr);
		resizeableTF.curTF.style.minWidth  = Math.max(25, e.pageX - resizeableTF.offset[0] - curPos[0]) + 'px';
		resizeableTF.curTF.style.width     = Math.max(25, e.pageX - resizeableTF.offset[0] - curPos[0]) + 'px';
		resizeableTF.cancelEvent(e);
	},

	resizeta_v: function (e) {
		var curPos = resizeableTF.getposition(resizeableTF.curTF_Nr);
		resizeableTF.curTF.style.minHeight = Math.max(resizeableTF.TF_lineheights[resizeableTF.curTF_Nr], e.pageY - resizeableTF.offset[1] - curPos[1]) + 'px';
		resizeableTF.curTF.style.height    = Math.max(resizeableTF.TF_lineheights[resizeableTF.curTF_Nr], e.pageY - resizeableTF.offset[1] - curPos[1]) + 'px';
		resizeableTF.cancelEvent(e);
	},

	resizeta_x: function (e) {
		var curPos = resizeableTF.getposition(resizeableTF.curTF_Nr);
		resizeableTF.curTF.style.minWidth  = Math.max(25, e.pageX - resizeableTF.offset[0] - curPos[0]) + 'px';
		resizeableTF.curTF.style.width     = Math.max(25, e.pageX - resizeableTF.offset[0] - curPos[0]) + 'px';
		resizeableTF.curTF.style.minHeight = Math.max(resizeableTF.TF_lineheights[resizeableTF.curTF_Nr], e.pageY - resizeableTF.offset[1] - curPos[1]) + 'px';
		resizeableTF.curTF.style.height    = Math.max(resizeableTF.TF_lineheights[resizeableTF.curTF_Nr], e.pageY - resizeableTF.offset[1] - curPos[1]) + 'px';
		resizeableTF.cancelEvent(e);
	}
};

window.addEventListener('load', resizeableTF.pageload, true);
resizeableTF.pageload();