Ich versuche, einen bestimmten Text in einem Eingabetextfeld fett zu bekommen. Ich bin mir nicht sicher, wie ich das machen soll, da HTML-Code nicht innerhalb eines Textfelds interpretiert wird, also funktioniert alles wie <b> nicht. Ist es möglich, nur einen Text fett zu machen? Methoden wie fett() fügen nur <b> um die Zeichenfolge hinzu.Wie machst du nur einen Text in einem Eingabetextfeld fett?
Dank
Hier ist ein Trick.
Ein INPUT-Feld steht über einem SPAN. Mit einem Beispiel für eine Funktion, die die drei ersten Buchstaben fett formatiert. Möglicherweise treten bei älteren Browsern Probleme mit der Transparenz auf. In diesem Fall können Sie das normale Eingabefeld ohne den Fettdruck verlassen.
<!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>
Ich werde diese Antwort eine Chance geben, ich habe es außerhalb der Seite getestet, an der ich arbeite, und es scheint gut genug zu funktionieren. Danke – clinchergt
Passen Sie auf, dass Sie eine ungewöhnliche Route beginnen und möglicherweise mit einigen Überraschungen auf dem Weg laufen. Ein anderer Ansatz wäre ein Eingabefeld, in dem Sie eingeben und unterhalb des formatierten Ergebnisses liegen. Wie wenn Sie hier Fragen beantworten. – Mic
Try this:
<input type="text" style="font-weight: bold;" value="Some Value" />
Aber auf diese Weise der gesamte Text innerhalb des Elements bolded wird. Ich denke, es gibt keine einfache Möglichkeit, nur ein Stück des Textes stylen würde
OP wollen ** Teile ** der Eingabe fett gedruckt werden. –
Vielleicht eine mögliche Lösung für Sie eine editierbare div zu verwenden, wie folgt aus:
<div contentEditable="true">
Lorem <b>ipsum</b> dolor
</div>
Wenn Sie versuchen, diesen Wert zu unterbreiten In einem Formular müssen Sie JavaScript verwenden, um das innere HTML dieses div zu erhalten und es einer versteckten Eingabe oder etwas zuzuordnen.
Das ist vielleicht die einfachste Lösung, ich werde das definitiv verwenden, wenn ich Mics Lösung nicht auf der richtigen Seite finden kann. Ich habe tatsächlich versucht, das innerHTML zu bekommen, so dass das Formular es bekommen konnte, aber ich war nicht erfolgreich, es ignoriert nur den HTML-Code. Könnte es sein, weil ich GET und nicht POST benutzt habe? – clinchergt
@clinchergt: Ich müsste einen Beispielcode sehen, mit dem Sie dabei geholfen haben. – Travesty3
Es hängt davon ab, welche Browser Sie unterstützen möchten. Wenn Sie nur HTML5-Browser unterstützen möchten, fügen Sie einfach ein div mit dem contenteditable-Flag ein und formatieren Sie es mit CSS, um wie eine Eingabe zu wirken.
<div contenteditable>Text <b>bold</b></div>
Wenn die fett in einem sehr kontrollierten Bereich ist, als vielleicht etwas tun:
<div>
<input type="text" style="font-weight: bold;" value="Bold text" />
<input type="text" value="This is not" />
</div>
CSS Mit ihm und JS, um Stil den Aufwand zu verwalten. Dies könnte jedoch schnell hässlich werden.
wir brauchen so etwas wie die Android-Ansicht, die benutzerdefinierte HTML-Markup ermöglicht, link Erkennung usw., nativ ... das Problem das ist.
Der beste Weg, so etwas zu haben, ist, Ihr eigenes benutzerdefiniertes Element zu bauen.
können Sie Ihr eigenes <my-input></my-input> Element erstellen und Ihren eigenen Eingang anpassen.
Nicht in einem einfachen Eingabefeld. Suchen Sie stattdessen nach [bearbeitbaren divs] (http://blog.whatwg.org/the-road-to-html-5-contenteditable) oder einfach nicht. –
Sie nicht, es sei denn, Sie erstellen ein Element, das die Eingabe perfekt überlagert, und das ist ein totaler Albtraum. Die Art und Weise, wie RTEs arbeiten, besteht darin, einen Iframe mit dem Inhalt zu verwenden, damit sie ihn erstellen können. – MetalFrog
doppelte Frage wie hier [http://stackoverflow.com/questions/5408292/just-trying-to-give-a-bold-font-to-an-input-text](http://stackoverflow.com/questions/5408292/Nur-versuchen-zu-geben-ein-fett-Schriftart-zu-einem-Eingabe-Text) –