✔ Chrome Safari focus() Problem

one6666

one6666

Mitglied Titanium
Hallo,

Nachtrag<start>:
Habe es geschafft:)
Für nachträgliche leser:
Der Safari und Chrome brauchen das setzen einens focus() garnicht,
befindest du dich in dem Textbereich so springt er nachdem anwählen einer Eigenschafft(bold italic usw.) direkt in diesen Bereich zurück,
kommt aber noch etwas anders dazu, der ein oder andere wird beim schreiben vielleicht direkt bold drücken und dann in das Textfeld wechseln,
sowären aber die Eigenschafften weg, um das zu lösen muss man einen focus() setzen :D WIEDERSPRUCH*
Da man aber sicher weiß das bei dem ersten Laden der focus nicht in den Textfeld ist, kann man sich so helfen:
HTML: 
var activ = false;

function toedit(command, parameter){
	
	if(activ == false){
        document.getElementById("textfield_id").focus();
		activ = true;
	}
	
    document.execCommand(command, false, parameter);
}
Das wäre jetzt der Chrome und Safari Code ;-)
Nachtrag<ende>:


bin mir garnicht so 100% sicher ob es jetzt am focus() liegt, sieht aber ganz danach aus,
bin jetzt aktuell bei den einfügen von bold, italic und underline, nur dabei unterscheiden sich die Browser schon,
im IE, Firefox und Opera geht alles einwandfrei:),
aber im Safari und im Chrome passiet wenn man das zweite 2 mal auf eine Eigenschafft klickt (bold, italic oder underline) folgendes:
Bestender Text wird makiert, und dann gelöscht, der focus() liegt dann wieder im Textfeld und man fängt mit der neuen Eigenschafft anzu schreiben :eek:

Ich habe schon versucht das ganze Rätsel zu entschlüßeln, aber ganz sicher bin ich mir nicht, ich würde aber mal drauf tippen das der focus() dran schuld ist :confused:

Hier mal eine Live Demo zum besseren verständnis:
http://media-volex.de/editor/editor.html

Hier nochmal der Code:
HTML:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYSIWYG Editor by One</title>

<!-- Include-->
<script type="text/javascript" src="js/editor.js"></script>   <!-- Include JS -->
<link rel="stylesheet" type="text/css" href="css/editor.css"> <!-- Include CSS -->

</head>

<body>
<button onclick="toedit('bold', 'null')"><b>B</b></button>
<button onclick="toedit('italic', 'null')"><i>I</i></button>
<button onclick="toedit('underline', 'null')"><u>U</u></button>
<br />
<div class="textfield_css" id="textfield_id" contenteditable="true">?</div>

</body>
</html>
CSS:
HTML: 
@charset "utf-8";
/* CSS Document */

.textfield_css{
	width:400px;
	height:150px;
	border:#666 1px solid;
	cursor:text; /*Firefox Cursor Bug fixed*/
	outline:none; /*Firefox Outline Bug fixed*/
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
}
.textfield_css p{ /*IE Opera Bug fixed*/
	margin:0px;
	padding:0px;
}
Javascript:
HTML: 
// JavaScript Document
function toedit(command, parameter){
	document.getElementById("textfield_id").focus();
    document.execCommand(command, false, parameter);
}

Weiß Jemand wo der Fehler sich versteckt ?
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück