Texto en un INPUT no seleccionable

el_javi · #1 (**permalink**) 20/10/2005, 11:13

Buenas tardes a tod@s.

Tengo una pregunta...

Tenemos un HTML tan simple como una caja de texto, CON CONTENIDO.

Al tabular por el documento, ha de quedarse el foco en la caja, pero NO QUIERO QUE EL TEXTO SE SELECCIONE.

El tema esta en el efecto que reaiza al seleccionarse el texto.

Si alguien sabe algo, rogaría me lo comunicaran.

Muchas gracias y un saludo.

caricatos · #2 (**permalink**) 20/10/2005, 12:57

Hola:

Al menos en opera y mozilla puedes igualar las propiedades selectionStart y selectionEnd del cuadro cuando recibe el foco... La verdad es que en explorer no se me ocurre como.

saludos

flaviovich · #3 (**permalink**) 20/10/2005, 17:03

Hola el_javi y Caricatos!
Parece que encontre la solucion. Solo que es un tanto grande

Advierto que los creditos no son mios. Yo simplemente hice unas pequeñas modificaciones. El codigo original lo pueden ver aqui.

Código HTML:

<html>
<head>
<style type="text/css">
  textarea, input {
    behavior: url(selection.htc);
  }
</style>
<script type="text/javascript">
function selectText(start,end)
{
	var text = document.getElementById("test");
	text.setSelectionRange(start, end);
}
</script>
</head>
<body>
<form>
<input id="test" type="text" value="CON CONTENIDO" onFocus="selectText(0,0)">
</form>
</body>
</html>

Codigo del archivo selection.htc

Código HTML:

<public:component>
  <public:property name="selectionStart" get="getSelectionStart" />
  <public:property name="selectionEnd" get="getSelectionEnd" />
  <public:attach event="onfocus" handler="storeSelection" />
  <public:attach event="onselect" handler="storeSelection" />
  <public:attach event="onclick" handler="storeSelection" />
  <public:attach event="onkeyup" handler="storeSelection" />
  <public:method name="setSelectionRange" />
  <script type="text/javascript">
    var selection = null;
    var selectionStart = -1;
    var selectionEnd = -1;

    function storeSelection(noRecurse)
    {
      // Иногда document.selection устанавливается правильно лишь
      // спустя некоторое время, приходится это учитывать
      if (!noRecurse)
        setTimeout(function() {storeSelection(1)}, 500);

      if (element.document.selection.type != "None" && element.document.selection.type != "Text")
        return;

      var range = element.document.selection.createRange();
      if (range.parentElement() != element)
        return;

      selection = range.duplicate();
    }

    function getSelectionStart()
    {
      updateVars()
      return selectionStart;
    }
    function getSelectionEnd()
    {
      updateVars();
      return selectionEnd;
    }
    function updateVars()
    {
      if (!selection)
        return;

      selectionStart = selectionEnd = -1;

      // Поправка на странный глюк при определении позиции в конце однострочного текста
      if (element.value.indexOf("\r") < 0)
      {
        var wholeRange = element.document.body.createTextRange();
        wholeRange.moveToElementText(element);
        if (!selection.compareEndPoints("startToEnd", wholeRange))
          selectionStart++;
        if (!selection.compareEndPoints("endToEnd", wholeRange))
          selectionEnd++;
      }

      selectionStart -= selection.moveStart("character", -element.value.length);
      selectionEnd -= selection.moveEnd("character", -element.value.length);
      selection = null;

      // Вводим поправку на то, что знак \r не учитывается
      var pos = -1;
      do
      {
        pos = element.value.indexOf("\r", pos + 1);
        if (pos >= 0 && selectionStart > pos)
          selectionStart++;
        if (pos >= 0 && selectionEnd > pos)
          selectionEnd++;
      } while (pos >= 0 && pos < selectionEnd);
    }

    function setSelectionRange(startPos, endPos)
    {
      if (startPos > endPos)
        startPos = endPos;

      // Вводим поправку на то, что знак \r не учитывается
      var startCorrection = element.value.substr(0, startPos).match(/\r/g);
      startCorrection = startCorrection ? startCorrection.length : 0;
      var endCorrection = element.value.substr(0, endPos).match(/\r/g);
      endCorrection = endCorrection ? endCorrection.length : 0;

      selection = element.createTextRange();
      selection.collapse(true);
      selection.moveEnd("character", endPos - endCorrection);
      selection.moveStart("character", startPos - startCorrection);
  
      selection.select();

      // Это нужно для случая, когда startPos == endPos
      storeSelection();
    }
  </script>
</public:component>

Algunas observaciones. En IE funciona bien

En realidad, la finalidad principal de este codigo, es la selección de un texto determinado en un input o textarea. Por lo tanto, no es una solucion optima, a mi parecer. Como variante podria usarse el objeto selection.

el_javi · #4 (**permalink**) 20/10/2005, 17:12

Buenas noches flaviovich.

Lo primero darte las gracias en el tema de haberme puesto el post.

Lo segundo, comentarte que para IE, tengo una solución de 2 líneas

Es tan simple como igualar el contenido de la caja de texto al contenido de la misma caja de texto.

Esto hace que la caja quite la selección.

Ahora, el problema está en FIREFOX, el cual SI DEJA LA SELECCIÓN.

Me gustaría que alguien me ayudara en ello.

Muchas gracias a tod@s.

programeitor · #5 (**permalink**) 01/11/2005, 12:47

value=value;return false;

el_javi · #6 (**permalink**) 02/11/2005, 02:14

Hola a tod@s de nuevo.

Gracias Progameitor, por el post que me has puesto.. pero sigue sin funcionarme.

Sigo con el problema de que al ir tabulando un formulario, al llegar a un Input con Texto, el texto se selecciona (acción que NO QUIERO Q OCURRA).

Si alguien sabe como ayudarme..rogaría q me contestara.

PD: Este fallo solo me ocurre en Firefox, dado que en explorer ya lo e solucionado.

Muchas gracias

caricatos · #7 (**permalink**) 02/11/2005, 02:37

Hola:

Aunque no sea una solución que me guste, fíjate en el siguiente código:

Código:

<html>
<body >
<form>
<input type="text" onfocus="temp1 = this.value; this.value = ''; setTimeout('document.forms[0][0].value = temp1', 10)" />
<input type="text" onfocus="temp2 = this.value; this.value = ''; setTimeout('document.forms[0][1].value = temp2', 10)" />
<input type="text" onfocus="temp3 = this.value; this.value = ''; setTimeout('document.forms[0][2].value = temp3', 10)" />
</form>
</body>
</html>

Saludos

programeitor · #8 (**permalink**) 02/11/2005, 08:47

No se, he probado lo que he puesto en Firefox y se quita la seleccion.

<input value="hola" tabindex=1>
<input value="adios" tabindex=2 onselect="value=value;return false">
<input value="hola" tabindex=3>

JavierB · #9 (**permalink**) 02/11/2005, 09:44

Hola programeitor

No soy yo el que ha planteado la duda, pero quiero darte las gracias por tu código, porque la verdad es que he estado dandome de tortas con el JavaScript para tratar de encontar una solución y no daba con ello.

Utilizaba un código similar al tuyo, pero con el evento onfocus y no marchaba ni a tiros.

Saludos,

programeitor · #10 (**permalink**) 02/11/2005, 12:24

de nada

.

No me habia fijado en que estaban utilizando el evento onfocus, con el cual tambien se puede realizar un apaño:

onfocus="value=value;this.blur();"

pero tiene un defecto, y es que al quitarle el foco ,se altera la tabulacion. ,en Ie, se inhabilita literalmente para todos los campos ,y en NS ,se lo devuelve al campo anterior . Toda una paranoia a la que nos tienen acostumbrados los navegadores.

ademas NF suelta error, de que el acceso a la propiedad selectedIndex a sido denegado:

Cita:

Iniciado por Nozilla Firefox

Error: [Exception... "'Permiso para obtener la propiedad XULElement.selectedIndex denegado' when calling method: [nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame ::

Cita:

Iniciado por Nozilla Firefox

<unknownfilename> :: onfocus :: line 0" data: no]

pero es un error de una funcion nativa, que intenta averiguar el index seleccionado, y por alguna razon ,no es capaz de lograrlo, .Tal vez sea porque le hemos quitado el foco, y esa funcion llega "tarde". No se, ¿ a ustedes que les parece ?.

Saludos.

el_javi · #11 (**permalink**) 03/11/2005, 02:15

Hola a todos.

Muchas gracias por vuestra dedicación y por aportarme la información necesaria para poder arreglar este problema.

He tardado en contestar por excedentes de trabajo en el sector, y por fin, vi vuestras contestaciones.

Gracias, y espero poder ayudaros al igual que lo habeis hecho vosotros.

Saludos a todos.