CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

Nicklas_J Nybegynder

01. februar 2010 - 09:48 Der er 8 kommentarer og
1 løsning

Tekst (klik) text field

Hej.
Har set på flere sider at man kan ændre noget når man klikker på det således:

F.eks:
Abekat

Så hvis du trykker på "Abekat" så ændres det fra (normal tekst)abekat til en input text felt med value abekat.

Og derefter kan man ændre det man vil, og så når man klikker væk fra abekat, så gemmer den det man har ændret (PHP)

Synes godt om

tjens Nybegynder

01. februar 2010 - 15:25 #1

Hvordan virker dette i forhold til hvad du havde i tankerne?

<p>
<span onclick="this.contentEditable=true; this.focus();return true;" onblur="this.contentEditable=false; alert(this.firstChild.nodeValue); return true;">
Click to Edit me
</span>
</p>

alert skal så skiftes ud med din rutine til at gemme via en php-side.

Synes godt om

Nicklas_J Nybegynder

01. februar 2010 - 18:22 #2

Det var lige hvad jeg havde i tankerne.

Udfra hvad du postede, så har jeg lavet et lille script som sender data til editsave.php.
Det lader til at virke, hele processen, men dog så får jeg "undefined" indsat i databasen.
Her er scriptet:

<html>
<head>
<link href="../style.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script type="text/javascript">
/* ---------------------------- */
/* XMLHTTPRequest Enable */
/* ---------------------------- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();
/* -------------------------- */
/* INSERT */
/* -------------------------- */
/* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
var nocache = 0;
function insert() {
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('insert_response').innerHTML = "To Sek .. "
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
var ujokeedit= encodeURI(document.getElementById('ujokeedit').value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
http.open('get', 'editsave.php?ujokeedit='+ujokeedit+'&nocache = '+nocache);
http.onreadystatechange = insertReply;
http.send(null);
}
function insertReply() {
if(http.readyState == 4){
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('insert_response').innerHTML = 'Respons: '+response;
}
}
</script>
<?
include "tilslut.php";
$query = mysql_query("SELECT * FROM member_admin") or die(mysql_error());
$row = mysql_fetch_array($query);
?>
<p>
<span id="ujokeedit" onclick="this.contentEditable=true; this.focus();return true;" onblur="this.contentEditable=false; java script:insert(); return true;">
<?=$row["ujoke"]; ?>
</span>
<div id="insert_response"></div>
</p>

Med det får man en tanke om at variablen "ujokeedit" er udefineret, men det er den altså ikke, og den burde ikke give tom værdi.
Hvad har jeg gjort forkert?

Synes godt om

intenz Novice

01. februar 2010 - 19:06 #3

Du bruger:
document.getElementById('ujokeedit').value

på et span element, der ikke har en value attribute.
Jeg vil tro du skal bruge:
document.getElementById('ujokeedit').innerHTML

eller måske:
document.getElementById('ujokeedit').nodeValue

som der blev foreslået i det første indlæg.

Synes godt om

Nicklas_J Nybegynder

01. februar 2010 - 19:39 #4

InnerHTML virkede perfekt :).
Har et spørgsmål. Er det muligt at "designe" det felt du ændrer i.. måske gøre det lidt større, eller smide en hvid baggrund bagi, ligesom en input felt?

Synes godt om

intenz Novice

01. februar 2010 - 20:34 #5

Jeg ville have lavet løsningen anderledes fra starten, så den skifter teksten ud med et input element. Det gør det hele lidt nemmere at styre.

Jeg har lavet denne her lille test med kommentarer.
<script language="JavaScript">
function myEditable(e, act) {
if (act == 'click') {
// lav indholdet af span om til et input felt og sæt et onblue event på den
e.innerHTML = '<input type="text" value="'+e.innerHTML+'" onblur="myEditable(this, \'edit\')" />';

// fjern span onclick eventen
e.onclick = null;

} else if (act == 'edit') {
// hent span elementet igen
var parentElement = e.parentNode;

// Opdater span teksten, e.value er den nye værdi
parentElement.innerHTML = e.value;

// placer onclick eventen igen på span elementet
(function(e){
e.onclick = function()
{
myEditable(e, 'click');
};
})(parentElement);

}

}
</script>
<p>
<span onclick="myEditable(this, 'click');">Click to Edit me</span>
</p>

Synes godt om

Nicklas_J Nybegynder

01. februar 2010 - 21:32 #6

Ja det var helt fra start den idé jeg havde med sådan en input box.. Hvordan skal jeg inkludere det jeg har kodet med at sende data videre til insert.php (tidligere indlæg), ind i det her? Ved ik rigtigt hvordan jeg skal gøre det?

Har for mig det skal gøres omkring her:

// Opdater span teksten, e.value er den nye værdi
parentElement.innerHTML = e.value;

Hvordan skal jeg sende/tage imode e.value, kan jeg bruge:
var tekstny= encodeURI(document.getElementById('e.value').innerHTML);

når den skal tage imod (og så sende videre til insert.php) ?
Men er e.value er jo ikke et element med id? eller hvad?
Men jeg skal jo også sende den ind.. blir helt forvirret.

Håber du kan hjælpe mig videre.

Synes godt om

Nicklas_J Nybegynder

01. februar 2010 - 21:48 #7

Tog mig vist sammen efter jeg skrev indlægget, og fik klaret det selv!
Skriv svar begge to, da i begge to har været hjælpevillige.
Her er min løsning, til jer som ønsker noget lign.:
<script language="JavaScript">
function myEditable(e, act) {
if (act == 'click') {
// lav indholdet af span om til et input felt og sæt et onblue event på den
e.innerHTML = '<input type="text" value="'+e.innerHTML+'" onblur="myEditable(this, \'edit\')" />';

// fjern span onclick eventen
e.onclick = null;

} else if (act == 'edit') {
var nocache = 0;
// hent span elementet igen
var parentElement = e.parentNode;

// Opdater span teksten, e.value er den nye værdi
parentElement.innerHTML = e.value;
nocache = Math.random();
var tekstny= e.value;
http.open('get', 'editsave.php?tekstny='+tekstny+'&nocache = '+nocache);
http.onreadystatechange = insertReply;
http.send(null);
// placer onclick eventen igen på span elementet
(function(e){
e.onclick = function()
{
myEditable(e, 'click');
};
})(parentElement);

}
function insertReply() {
if(http.readyState == 4){
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('insert_response').innerHTML = ''+response;
}
}

}
</script>
<p>
<span onclick="myEditable(this, 'click');"><?=$row["felt"]; ?></span>
</p>
<div id="insert_response"></div>

Takker endnu engang begge to..

Synes godt om

intenz Novice

02. februar 2010 - 13:03 #8

Godt du fik klaret det :)

Synes godt om

tjens Nybegynder

02. februar 2010 - 14:10 #9

Giv alle point til intenz: Han har brugt mest tid.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS