Sto cercando di ottenere un testo specifico in grassetto, all'interno di un campo di testo di input. Non sono sicuro di come farlo perché il codice html non è interpretato all'interno di un campo di testo, quindi qualcosa come <b> non funzionerà. È possibile evidenziare solo un testo? Metodi come grassetto() aggiungono solo <b> alla stringa.Come si crea un testo, all'interno di un campo di testo di input, in grassetto?
Grazie
Ecco un trucco.
Un campo INPUT è su un SPAN. Con un esempio di funzione che mette i primi 3 caratteri in grassetto. È possibile che si verifichino problemi di trasparenza con il browser precedente. In tal caso puoi lasciare il campo di input normale senza l'effetto grassetto.
<!DOCTYPE html>
<html lang="en">
<head>
<title>transp</title>
<style>
div{
position:relative;
}
input, span{
top:0;
position:absolute;
width:120px;
}
span{
top:2px;
left:2px;
z-index:1;
overflow:hidden;
}
input{
background:transparent;
z-index:2;
}
</style>
</head>
<body>
<div>
<input onkeyup="bold3(this)" />
<span id="back"></span>
</div>
<script>
function bold3(inp){
inp.style.color = 'transparent';
var span = document.getElementById('back');
span.innerHTML =
'<b>' +
inp.value.substr(0, 3) +
'</b>' +
inp.value.substr(3);
}
</script>
</body>
</html>
Darò una risposta a questa risposta, l'ho testata fuori dalla pagina su cui sto lavorando e sembra che funzioni abbastanza bene. Grazie – clinchergt
Attenzione che si avvia un percorso insolito, e può essere eseguito con alcune sorprese lungo la strada. Un altro approccio sarebbe quello di avere un campo di input in cui si digita e sotto il risultato formattato. Come quando rispondi alle domande qui. – Mic
provare questo:
<input type="text" style="font-weight: bold;" value="Some Value" />
Ma in questo modo tutto il testo all'interno dell'elemento sarà in grassetto. Credo che non c'è un modo semplice per lo stile solo una parte del testo
OP desidera ** parti ** dell'input essere grassetto. –
Forse una possibile soluzione sarebbe per l'utilizzo di un div modificabile, in questo modo:
<div contentEditable="true">
Lorem <b>ipsum</b> dolor
</div>
Se si sta tentando di presentare questo valore in una forma, dovrai usare JavaScript per ottenere il innerHTML di questo div e assegnarlo a un input nascosto o qualcosa del genere.
Questa potrebbe essere la soluzione più semplice, la userò sicuramente se non riuscirò a far funzionare la soluzione di Mic sulla pagina effettiva. In realtà ho cercato di ottenere l'innerHTML in modo che il modulo potesse ottenerlo, ma non ho avuto successo, ignora solo il codice html. Potrebbe essere perché ho usato GET e non POST? – clinchergt
@clinchergt: dovrei vedere qualche esempio di codice che hai usato per aiutarti. – Travesty3
Dipende dai browser che si desidera supportare. Se vuoi solo supportare i browser HTML5, basta trascinare un div con il set di flag contenteditable e modificarlo con css in modo che assomigli ad un input.
<div contenteditable>Text <b>bold</b></div>
Se il grassetto è in una zona molto controllata, che forse fare qualcosa di simile:
<div>
<input type="text" style="font-weight: bold;" value="Bold text" />
<input type="text" value="This is not" />
</div>
Utilizzando i CSS per lo stile e JS per gestire l'overhead. Questo potrebbe diventare presto brutto però.
abbiamo bisogno di qualcosa come la vista di Android, che permette di HTML personalizzato markup, collegare il riconoscimento ecc, in modo nativo ... questo è il problema.
Il modo più vero di avere una cosa del genere è creare il proprio elemento personalizzato .
è possibile creare il proprio elemento <my-input></my-input> e personalizzare il proprio input.
Non in un campo di input semplice. Cerca [div modificabili] (http://blog.whatwg.org/the-road-to-html-5-contenteditable) invece o semplicemente non farlo. –
Non lo fai, a meno che non crei un elemento che si sovrapponga perfettamente all'input, e questo è un incubo totale. Il modo in cui le RTE fanno è utilizzare un iframe con il contenuto in modo da poterlo manipolare. – MetalFrog
domanda duplicata come qui [http://stackoverflow.com/questions/5408292/just-trying-to-give-a-bold-font-to-an-input-text](http://stackoverflow.com/questions/5408292/just-trying-to-give-a-grass-font-to-an-input-text) –