¿es posible hacer que una parte del cuadro de texto sea solo de lectura?

Intento mostrar un texto predeterminado en el cuadro de texto y hacerlo de solo lectura.

el usuario podrá agregar texto después de ese texto de solo lectura.

¿Es posible por JS y html o css?

enter image description here

El texto READONLY será de solo lectura y el usuario no puede cambiarlo. Pero el usuario puede agregar algo de texto después de eso. Es posible. Yo voy a publicar el texto. así que no voy con la etiqueta. Puedo dividirla en 2. ¡Pero solo tengo curiosidad!

var InputMask = { init: function () { var divMask = document.getElementById("readonly"); var inputField = document.getElementById("myInput"); InputMask._input = inputField; InputMask._pos = 0; // resets the form inputField.value = ""; divMask.addEventListener('click', InputMask.focusHandler, false ); inputField.addEventListener('focus', InputMask.focusHandler, false ); inputField.addEventListener('keydown', InputMask.keyInput, false ); }, focusHandler: function(event){ InputMask._input.focus(); var backup = InputMask._input.value.substr(20) || ""; InputMask._input.value=" " + backup; }, keyInput: function ( event ) { var length_invalid = (InputMask._input.value.length == 20 ) ? true : false; var realString = InputMask._input.value.substr(20); var realLength = realString.length; // fix to mouse selection delete if ( InputMask._input.value.length < 20 ) { InputMask._input.value=" "; } // backspace code = 8 if (event.keyCode == 8 && length_invalid ) event.preventDefault(); // left arrow key = 37 if ( event.keyCode == 37 && (realLength + InputMask._pos) == 0 ) { event.preventDefault(); } else if (event.keyCode == 37 && ( InputMask._pos >= (0 - realLength))) { InputMask._pos--; } // right arrow key = 39 if ( event.keyCode == 39 && InputMask._pos < 0) InputMask._pos++; // enter = 13 if ( event.keyCode == 13) { alert ( "Input Value: ["+ InputMask._input.value.substr(20) +"]"); // reset InputMask.reset(); } }, reset: function(){ var field = InputMask._input; field.value = ""; field.blur(); } }; InputMask.init(); 

jsFiddle

Este código usa el estilo de CSS, algunos espacios de texto en el valor de entrada y controladores de eventos. No escribí una función de manejo completo para la selección del mouse, que actualmente permite al usuario seleccionar los espacios en blanco y eliminarlos (o incluso retroceder, si hay una cadena escrita), pero insertará los 20 espacios si se presiona alguna tecla y la longitud es <20.

Cuando presione las teclas de flecha, calculará dónde se encuentra el cursor y, en función de eso, le permitirá moverlo o no (simplemente evite Predeterminado). Y en ENTER, mostrará el valor sin los espacios de relleno.

Lo bueno de la div superpuesta es que puedes usar diferentes colores de texto, fondos, etc. (estilo de div) ... Todo lo que necesitas hacer es establecer la cantidad de espacios en blanco para que parezca que el div está dentro de la entrada .

Por supuesto, esto no es un navegador cruzado, tendrás que hacer todos los controles de statement y de manejo de eventos por tu cuenta, pero creo que eso es básicamente lo que querías, ¿no?

Cualquier validación verdadera debe hacerse en el backend, pero puede asignar un valor al atributo de valor del cuadro de texto. En carga, esto establecerá la propiedad defaultValue del elemento en el DOM. Luego, en cada evento de keyup, compara el valor del texto con el de su valor original y lo modifica como mejor le parezca.

Si inserta texto en el medio del valor, observe cómo inserta la parte que no coincide y conserva el rest del valor que tenía. Esto podría ser útil si pega una cadena larga y no desea perder el texto.

http://jsfiddle.net/vol7ron/HdpPp/

 var $text = $('#text'); $text.on('keyup',function(){ // Cache some lookups var $this = $(this); var _val = $this.val(); var _dv = $this.prop('defaultValue'); var _len = _dv.length; var _tmp = _val.substring( 0, Math.min( $this.val().length, _len ) ); var mismatch = { found:false, position:0 }; // Look for character position where two strings differ for(var i=0,n=_tmp.length;i 

La forma más fácil de implementar esto es usar el posicionamiento CSS / etiqueta, como otros ya han sugerido.

Mueva el texto a un elemento normal ( ) antes del cuadro de texto y agregue estilo CSS para que se vea como si estuviera dentro del cuadro.

Solo algo que azoté. Espero eso ayude

  
type here: