WOW! Acabo de pensar en otra solución que a la vez me podría solucionar otro problema. La solución es simple, si la selección es mayor a una letra se crea la caja de texto, de otra manera no se muestra nada. Así si solo se hace click en el texto la selección no es menor a uno, ya que no hay nada seleccionado, y no se crea la caja de texto.
Acá el código a como lo tengo ahora.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>seleccion</title>
<script type="text/javascript">
var editar = true;
function sel(){
if(editar == true){
var texto = document.getElementById('seleccion');
var inicio = window.getSelection().anchorOffset;
var Final = window.getSelection().focusOffset;
var textoIni = texto.innerHTML;
textoAnterior = textoIni.substr(0, inicio);
textoPosterior = textoIni.substr(Final);
var cajaValue = window.getSelection().toString();
if(cajaValue.length >= 1){
var textoFn = textoAnterior + "<input type='text' id='editando' value='" + cajaValue + "' size='" + cajaValue.length + "' />" + textoPosterior;
texto.innerHTML = textoFn;
document.getElementById('editando').focus();
document.getElementById('editando').select();
document.getElementById('editando').onblur = imprimeTexto;
editar = false;
}
}
}
function imprimeTexto(){
//document.getElementById('seleccion').onmouseup="";
//setTimeout("document.getElementById('seleccion').onmouseup=sel",100);
document.getElementById('seleccion').innerHTML = textoAnterior + document.getElementById('editando').value + textoPosterior;
editar = true;
}
</script>
</head>
<body>
<div id="seleccion" onmouseup="sel();">
texto que podra o no ser seleccionado. Al seleccionar devera ser convertido en una caja de texto para que sea editado.
</div>
</body>
</html> El segundo problema que me podría solucionar esta opción(y fue precisamente buscando una solución a ese problema que se me ocurrió esta segunda solución) es dar la oportunidad al usuario de seleccionar otra parte de la pagina para ser editada en lugar de simplemente dar click para guardar los cambios.
PD. Eh notado algo curioso, si la selección la haces de izquierda a derecha el efecto funciona de perlas, pero si seleccionas de derecha a izquierda, el efecto hace algo curiosos. Es fácil de solucionar, pero se me hizo curiosos jaja.