DZone Snippets: textarea code

Selection //JavaScript Class

jonasraoni (Jonas Raoni Soares Silva) — Sat, 06 Oct 2007 15:02:21 GMT

Retrieves and sets the cursor position, as well the selected text of inputs and textareas. After searching, I saw it's the only code which retrieves right information in textareas under Internet Explorer without damaging the "Ctrl+Z"

[UPDATED CODE AND HELP CAN BE FOUND HERE]



//+ Jonas Raoni Soares Silva

//@ http://jsfromhell.com/forms/selection [v1.0]



Selection = function(input){

	this.isTA = (this.input = input).nodeName.toLowerCase() == "textarea";

};

with({o: Selection.prototype}){

	o.setCaret = function(start, end){

		var o = this.input;

		if(Selection.isStandard)

			o.setSelectionRange(start, end);

		else if(Selection.isSupported){

			var t = this.input.createTextRange();

			end -= start + o.value.slice(start + 1, end).split("\n").length - 1;

			start -= o.value.slice(0, start).split("\n").length - 1;

			t.move("character", start), t.moveEnd("character", end), t.select();

		}

	};

	o.getCaret = function(){

		var o = this.input, d = document;

		if(Selection.isStandard)

			return {start: o.selectionStart, end: o.selectionEnd};

		else if(Selection.isSupported){

			var s = (this.input.focus(), d.selection.createRange()), r, start, end, value;

			if(s.parentElement() != o)

				return {start: 0, end: 0};

			if(this.isTA ? (r = s.duplicate()).moveToElementText(o) : r = o.createTextRange(), !this.isTA)

				return r.setEndPoint("EndToStart", s), {start: r.text.length, end: r.text.length + s.text.length};

			for(var $ = "[###]"; (value = o.value).indexOf($) + 1; $ += $);

			r.setEndPoint("StartToEnd", s), r.text = $ + r.text, end = o.value.indexOf($);

			s.text = $, start = o.value.indexOf($);

			if(d.execCommand && d.queryCommandSupported("Undo"))

				for(r = 3; --r; d.execCommand("Undo"));

			return o.value = value, this.setCaret(start, end), {start: start, end: end};

		}

		return {start: 0, end: 0};

	};

	o.getText = function(){

		var o = this.getCaret();

		return this.input.value.slice(o.start, o.end);

	};

	o.setText = function(text){

		var o = this.getCaret(), i = this.input, s = i.value;

		i.value = s.slice(0, o.start) + text + s.slice(o.end);

		this.setCaret(o.start += text.length, o.start);

	};

	new function(){

		var d = document, o = d.createElement("input"), s = Selection;

		s.isStandard = "selectionStart" in o;

		s.isSupported = s.isStandard || (o = d.selection) && !!o.createRange();

	};

}

Example





	

		Selection Test

		<br />www.jsfromhell.com
<br />Jonas Carlos Lalala
<br />Bin Laden x Bush
<br />

PHP : Parsea HTML inyectado / Parser HTML inject

Ricardo (Ricardo m. García) — Mon, 23 Jul 2007 11:16:14 GMT

Parsea HTML Inyectado. Esto es útil cuando nos escriben código HTML o Javascript maligno en un texarea. Para más información www.php.net / Parser HTML inject. This is good when we write HTML code or bad javascript on a textarea. For more info www.php.net (sorry english)
Código fuente / Source code :



function parsearHTMLInjectado($texto)

{

	return nl2br( htmlentities($texto) );	

}

using Event.observe for when a page loads

moneypenny () — Mon, 20 Nov 2006 20:47:53 GMT

I just prefer this implementation as opposed to window.onload.

Event.observe( window, 'load', function() {

  // Put the Javascript that needs to happen when the page

  // loads here

} );

For example, here's a way to make most of your input fields and all of your textareas have a different class when they're selected. Useful if you want to style them differently with CSS.

Event.observe( window, 'load', function() {

  var inputs = document.getElementsByTagName( 'input' );

  var textareas = document.getElementsByTagName( 'textarea' );



  for ( var i=0; i    type = inputs[i].type;



    if (

      ( type == 'button' || type == 'reset' ||

      type == 'password' || type == 'text' ||

      type == 'submit' ) &&

      ( inputs[i].onfocus == '' ||

      !inputs[i].onfocus )

    ) {

      inputs[i].onfocus = function() {

        this.className = 'selected';

      }



      inputs[i].onblur = function() {

        this.className = '';

      }

    }

  }



  for ( var i=0; i    if ( textareas[i].onfocus == '' || !textareas[i].onfocus ) {

      textareas[i].onclick = function() {

        this.className = 'selected';

      }

      textareas[i].onblur = function() {

        this.className = '';

      }

    }

  }

} );

Input and textarea preview

missha (Ana Belén Ramón) — Sun, 17 Apr 2005 18:34:32 GMT

Preview what you type in an input or a textarea out of them (in a html tag, like a p, hx...)

Seen here: http://amuchamu.bitacoras.com/archivos/2005/02/17/previsualizacion_de_comentarios (spanish explain).

javascript code:



function preview(id1, id2){

	  		var NewText = document.getElementById(id1).value;

	  		splitText = NewText.split(/\n/).join("
");

	  		var DivElement = document.getElementById(id2);

	  		DivElement.innerHTML = splitText;

}

html code:





Name:





Phone:







Preview



	Name:

	

	Phone: