Tener un valor permanente en un campo de entrada mientras aún puede agregarle texto

Question

No sé si esto es posible, pero me gustaría tener un campo de entrada donde tendría un valor que no es editable por el usuario. Sin embargo, no quiero que el campo de entrada sea "de solo lectura" porque aún quiero que el usuario pueda agregar texto después del valor.

Si tienes alguna idea sobre cómo hacer esto, házmelo saber por favor que me ayudaría mucho.

EDITAR: Yo uso formularios html.

Answer 1

me parece un poco extraño ... ¿por qué no solo usé una salida de texto y después el campo de entrada?

como a veces se utiliza para la fecha de nacimiento (aunque, tal vez no más ..)

birthyear: 19[input field] 

edición:

con algunas cosas javascript que podría darse cuenta de que algo así como usted pidió, aunque una entrada campo con texto y capturando las teclas dentro de ese campo mientras que solo permite algo después de lo que quiere que esté siempre allí, pero, bueno, necesitaría usar js ... y si es solo eso, diría que no es necesario

editar:

si quieres utilizar un truco solo para el espectador puedes usar un background-image/border-style que rodea un texto y el campo de entrada, haciendo que parezca que el texto y la entrada son de la misma entrada -caja.

Answer 2

Parece que quieres texto de marcador de posición. En HTML5, puede establecer el atributo placeholder en cualquier elemento input. Esto funcionará en los navegadores modernos.

<input type="email" placeholder="jappleseed@appletree.com" name="reg_email" /> 

Ahora, para navegadores anteriores esto no funcionará. Necesitará una alternativa de JavaScript para proporcionar el mismo valor de IU.

Esto puede funcionar para todos los navegadores:

<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"> 

pero no es recomendable ya que hay una manera mejor (en realidad, es una combinación de las dos primeras aproximaciones): El uso de HTML5 marcado para los nuevos navegadores; jQuery y modernizr para navegadores antiguos. De esta forma, puede tener solo un conjunto de códigos que admitan todos los casos de usuarios.

toman directamente de webdesignerwall.com:

<script src="jquery.js"></script> 
<script src="modernizr.js"></script> 

<script> 
$(document).ready(function(){ 

if(!Modernizr.input.placeholder){ 

    $('[placeholder]').focus(function() { 
     var input = $(this); 
     if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
     input.removeClass('placeholder'); 
     } 
    }).blur(function() { 
     var input = $(this); 
     if (input.val() == '' || input.val() == input.attr('placeholder')) { 
     input.addClass('placeholder'); 
     input.val(input.attr('placeholder')); 
     } 
    }).blur(); 
    $('[placeholder]').parents('form').submit(function() { 
     $(this).find('[placeholder]').each(function() { 
     var input = $(this); 
     if (input.val() == input.attr('placeholder')) { 
      input.val(''); 
     } 
     }) 
    }); 

} 

</script> 

[Tendrá que ambos jquery.js y modernizr.js instalados en la misma carpeta que su página web.]

Nota: Tengo la sensación de que un poco más de investigación podría revelar que modernizr no es necesario para esto en absoluto, aunque podría estar equivocado sobre ese punto en particular.

Answer 3

Quizás, entonces, ¿quieres un menú de select?

<select name="mySelectMenu"> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
</select> 

Disculpa si esto no es lo que buscas tampoco. Me aferro a las pajas porque lo que estás pidiendo es muy vago.Quizás debería dar un ejemplo de para qué se usaría una de estas entradas "editables pero no editables".

Además, puede usar un selecty una entrada text.

Answer 4

El problema principal es determinar la posición del cursor. Esto se puede hacer, p. utilizando la siguiente function:

function getCaret(el) { 
    var pos = -1; 
    if (el.selectionStart) { 
     pos = el.selectionStart; 
    } 
    else if (document.selection) { 
     el.focus();   
     var r = document.selection.createRange(); 
     if (r != null) { 
      var re = el.createTextRange(); 
      var rc = re.duplicate(); 
      re.moveToBookmark(r.getBookmark()); 
      rc.setEndPoint('EndToStart', re);  
      pos = rc.text.length; 
     } 
    } 
    return pos; 
} 

ya se puede instalar un controlador de eventos para la prensa llave y comprobar si la tecla pulsada estaba dentro de la parte inmutable del valor del área de texto. Si estaba allí, el controlador de eventos devuelve falso, de lo contrario es verdadero. Este comportamiento puede ser envuelto en un objeto simple:

function Input(id, immutableText) { 
    this.el = document.getElementById(id); 
    this.el.value = immutableText; 
    this.immutableText = immutableText; 
    this.el.onkeypress = keyPress(this); 
}  
function keyPress(el) { 
    return function() { 
     var self = el; 
     return getCaret(self.el) >= self.immutableText.length; 
    } 
}  
Input.prototype.getUserText = function() { 
    return this.el.value.substring(this.immutableText.length); 
}; 
var input = new Input("ta", "Enter your name: "); 
var userText = input.getUserText(); 

se puede comprobar en jsFiddle (utilizar Firefox o Chrome).

Answer 5

Puede colocar el texto en la parte superior del campo de entrada para que parezca que está dentro de él. Algo como esto:

<input type="text" name="year" style="width:3.5em;padding-left:1.5em;font:inherit"><span style="margin-left:-3em;margin-right:10em;">19</span> 

De esta manera el campo de entrada se iniciará con "19", que no puede ser editado, y el usuario puede añadir información detrás de esto.

Básicamente lo que hace es establecer el campo de entrada a un ancho fijo, para que sepa cuánto margen negativo-izquierda para dar el lapso con su texto en él con el fin de que se coloca exactamente al comienzo de la campo de entrada.

Es posible que tenga que juguetear con el margen izquierdo del lapso en función del resto de su CSS.

Luego también agregando pedding-left al campo de entrada, para asegurarse de que el usuario comienza a escribir después de su texto y no debajo de él.

font: inherit debe asegurarse de que tanto el texto como el texto escrito por el usuario tengan la misma fuente.

Y si desea colocar algo a la derecha de este campo de entrada, agregue margen-derecho al tramo con su texto, ya que de lo contrario otro contenido podría comenzar a ejecutarse sobre su campo de entrada también.