1
Also, hier ist mein Dilemma: Ich versuche an einen Wert in JQuery anhängen. Also, ich habe eine input und was ich will, ist anhängen, um dann etwas Text (in diesem Fall ein Bindestrich) zu beenden. Ich habe versucht, .append("-");, aber das hat nicht funktioniert, weil es an die Rückseite der Eingabe und nicht den tatsächlichen Wert davon angehängt. Dann versuchte ich mit etwas wie append.val() kreativ zu werden, aber ich merkte schnell, dass man das nicht konnte. Geben Sie im folgenden Code drei Zeichen in den Namen input ein und starten Sie das Chaos. Hier ist mein Code:An einen Wert in JQuery anhängen
$(function() {
$("#editorTextInfoName").keyup(function() {
var infoNameTextValue = $("#editorTextInfoName").val();
$("#fullName").text(infoNameTextValue);
});
setInterval(function() {
var infoNameTextValue = $("#editorTextInfoName").val();
var editorTextInfoBoxLength = infoNameTextValue.length;
if (editorTextInfoBoxLength == 3) {
$("#fullName").append("-");
$("#editorTextInfoName").after("-");
}
}, 1);
});table {
display: inline-block;
}
#image {
width: 125px;
height: 125px;
border-radius: 50%;
margin-top: -45px;
}
.spacer {
width: 15px;
}
hr {
height: 200px;
width: 7.5px;
border-radius: 20px;
border: none;
background-color: cornflowerBlue;
}
#fullName {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
color: orange;
margin-top: -40px;
}
#job {
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
margin-top: -10px;
}
#jobLocationText {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
margin-top: -10px;
}
.otherText {
color: seaGreen;
}
#emailAddress, #phoneNumber, #officePhoneNumber, #address, #website {
font-size: 17px;
}
#extra1, #extra2, #extra3, #extra4, #extra5, #extra6 {
white-space: pre-wrap;
}
#signatureEditorText {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
margin-bottom: 40px;
}
.editorTextInfo {
color: gray;
font-family: 'Lato', sans-serif;
font-size: 18px;
margin-bottom: 7px;
}
.editorTextBox {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
height: 20px;
width: 160px;
border: 2px solid darkGray;
border-radius: 6px;
}
.editorTextBox:focus {
outline: 0;
}
#dash1, #dash2, #dash3, #dash4 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
}
#dash1 {
margin-left: -137px;
margin-top: -5px;
}
#dash2 {
margin-left: -104px;
margin-top: -5px;
}
#dash3 {
margin-left: -87px;
margin-top: -5px;
}
#dash4 {
margin-left: -54px;
margin-top: -5px;
}
#editorTextInfoPhone1 {
margin-left: -100px;
}
#editorTextInfoPhone2 {
margin-left: -131px;
}
#editorTextInfoPhone3 {
margin-left: -98px;
}
#editorTextInfoOfficePhone1 {
margin-left: -50px;
}
#editorTextInfoOfficePhone2 {
margin-left: -81px;
}
#editorTextInfoOfficePhone3 {
margin-left: -48px;
}
.editorTextBoxPhone, .editorTextBoxOfficePhone {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
height: 20px;
width: 24px;
border: 2px solid darkGray;
border-radius: 6px;
}
.editorTextBoxPhoneOther, .editorTextBoxOfficePhoneOther {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
height: 20px;
width: 32px;
border: 2px solid darkGray;
border-radius: 6px;
}
.editorTextBoxPhone:focus, .editorTextBoxPhoneOther:focus, .editorTextBoxOfficePhone:focus, .editorTextBoxOfficePhoneOther:focus {
outline: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="icon" href="Logo.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>HTML Hub</title>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<center>
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td>
<center>
<img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image" title="Picture to be displayed">
</center>
</td>
<td class="spacer"></td>
<td rowspan="4">
<hr>
</td>
<td class="spacer"></td>
</tr>
<tr>
<td>
<center>
<div id="fullName">Billy Staples</div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="job"><i>Programmer</i></div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="jobLocationText">at <b id="jobLocation">My Company</b></div>
</center>
</td>
</tr>
</table>
<table id="contactInfo" cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td>
<div id="emailAddress"><span class="otherText">Email: </span><span id="emailAddressText">[email protected]</span></div>
</td>
</tr>
<tr>
<td>
<div id="phoneNumber"><span class="otherText">Phone: </span><span id="phoneNumberFirst">111</span>-<span id="phoneNumberSecond">222</span>-<span id="phoneNumberThird">3333</span></div>
</td>
</tr>
<tr>
<td>
<div id="officePhoneNumber"><span class="otherText">Office Phone: </span><span id="officePhoneNumberFirst">444</span>-<span id="officePhoneNumberSecond">555</span>-<span id="officePhoneNumberThird">6666</span></div>
</td>
</tr>
<tr>
<td>
<div id="address"><span class="otherText">Address: </span><span id="addressText">1379 Philadelphia Avenue</span></div>
</td>
</tr>
<tr>
<td>
<div id="website"><span class="otherText">Website: </span><span id="websiteText">example.com</span></div>
</td>
</tr>
<tr>
<td>
<div id="extra1"><span class="otherText" id="extra1Label"></span><span id="extra1Text"> </span></div>
</td>
</tr>
<tr>
<td>
<div id="extra2"><span class="otherText" id="extra2Label"></span><span id="extra2Text"> </span></div>
</td>
</tr>
<tr>
<td>
<div id="extra3"><span class="otherText" id="extra3Label"></span><span id="extra3Text"> </span></div>
</td>
</tr>
<tr>
<td>
<div id="extra4"><span class="otherText" id="extra4Label"></span><span id="extra4Text"> </span></div>
</td>
</tr>
<tr>
<td>
<div id="extra5"><span class="otherText" id="extra5Label"></span><span id="extra5Text"> </span></div>
</td>
</tr>
</table>
</center>
<p></p>
<table id = "editTable" cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td>
<div id = "signatureEditorText">Signature Editor</div>
</td>
</tr>
<tr>
<td>
<div class = "editorTextInfo">Name</div>
</td>
</tr>
<tr>
<td>
<input id = "editorTextInfoName" type = "text" class = "editorTextBox">
</td>
</tr>
</table>
</body>
</html>Auch ich meinte eigentlich .after() für die input, nicht append(). Als ich versuchte .append(), tat es nichts.
Mein eigentliches Ziel dafür ist, dass es wie eine Telefonnummer input sein kann (Ich habe es gerade auf den Namen input getestet), so dass Sie drei Zahlen eingeben und dann fügt es einen Bindestrich hinzu.
Irgendwelche Vorschläge? Danke im Voraus!