Avere un valore permanente in un campo di input pur essendo ancora in grado di aggiungere del testo

Question

Non so se è possibile, ma mi piacerebbe avere un campo di input dove avrei un valore che non è modificabile dal utente. Tuttavia, non voglio che il campo di input sia "readonly" perché voglio comunque che l'utente sia in grado di aggiungere del testo dopo il valore.

Se hai qualche idea su come farlo, fammi sapere per favore che mi sarebbe di grande aiuto.

MODIFICA: Uso i moduli html.

Answer 1

sembra un po 'strano per me .. perché non utilizzare solo un output di testo e successivamente il campo di input?

come talvolta usato per la data di nascita (anche se, forse non più ..)

birthyear: 19[input field] 

edit:

con alcune cose javascript si potrebbe realizzare qualcosa di simile che hai chiesto, anche se un ingresso campo con il testo e la cattura di sequenze di tasti all'interno di quel campo, consentendo solo un po 'dopo quello che vuoi essere sempre lì - ma, beh, avresti bisogno di usare js ..e se è solo per quello, Id piuttosto dire che non è necessario

edit:

se si desidera utilizzare un trucco solo per il visualizzatore, è possibile utilizzare uno sfondo-immagine/bordo-stile che circonda un testo e il campo di input, in modo che assomigli al testo e l'input sia lo stesso input -scatola.

Answer 2

Sembra che tu voglia testo segnaposto. In HTML5 è possibile impostare l'attributo placeholder su qualsiasi elemento input. Questo funzionerà nei browser moderni.

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

Ora, per i browser meno recenti questo non funzionerà. Avrai bisogno di una alternativa JavaScript per fornire lo stesso valore dell'interfaccia utente.

Questo può funzionare per tutti i browser:

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

ma non è consigliato perché non c'è un modo migliore (in realtà, si tratta di una combinazione dei primi due approcci): Utilizzare HTML5 markup per i nuovi browser; jQuery e modernizr per i vecchi browser. In questo modo puoi avere solo un set di codice che supporterà tutti i casi degli utenti.

prese direttamente da 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> 

[Avrete bisogno di entrambe le jquery.js e modernizr.js installati nella stessa cartella del sito.]

Nota: Ho la sensazione che un po 'più di ricerca potrebbe rivelare che la modernizzazione non è affatto necessaria per questo, anche se potrei sbagliarmi su quel particolare punto.

Answer 3

Forse, quindi, vuoi un menu select?

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

Scusa se questo non è quello che vuoi sia. Prendo a pugni perché quello che chiedi è molto vago.Forse dovresti dare un esempio di ciò per cui uno di questi input 'modificabili ma non modificabili' sarebbe usato.

Inoltre, è possibile utilizzare un selecte un ingresso text.

Answer 4

Il problema principale è determinare la posizione del cursore. Questo può essere fatto ad es. utilizzando il seguente 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; 
} 

Ora è possibile installare un gestore di eventi per la pressione di un tasto e controllare se il tasto premuto era dentro la parte immutabile del valore del textarea. Se era lì, il gestore eventi restituisce false, altrimenti vero. Questo comportamento può essere avvolto in un semplice oggetto:

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(); 

È possibile controllare su jsFiddle (utilizzare Firefox o Chrome).

Answer 5

È possibile posizionare il testo sopra il campo di input per farlo apparire come se fosse al suo interno. Qualcosa di simile a questo:

<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> 

In questo modo il campo di input inizierà con "19", che non può essere modificato, e l'utente può aggiungere informazioni alla base di questo.

Fondamentalmente ciò che si fa è impostare il campo di input su una larghezza fissa, in modo da sapere quanto margine negativo a sinistra per dare lo span con il testo in esso in modo che sia posizionato esattamente all'inizio del Campo di inserimento.

Potrebbe essere necessario regolare il margine sinistro dello span a seconda del resto del css.

Quindi aggiungere anche pedding-left al campo di input, per assicurarsi che l'utente inizi a digitare dopo il testo e non sotto di esso.

font: inherit deve assicurarsi che sia il testo che il testo digitato dall'utente siano nello stesso carattere.

E se vuoi mettere qualcosa a destra di questo campo di input, aggiungi margine-destra allo span con il tuo testo, altrimenti il ​​contenuto potrebbe iniziare a funzionare anche sul tuo campo di input.