onclick работает только с тегом img

Этот код я нашел в документации Mozilla. Я хотел бы изменить значок со своим собственным CSS (или http://fortawesome.github.io/Font-Awesome/icons/), но когда я поменяю img top другой тег, как div, он не работает.onclick работает только с тегом img

Мой код (полный здесь http://jsbin.com/galutayixo/1/edit?html,output)

<!doctype html> 
 
<html> 
 
<head> 
 
<title>Rich Text Editor</title> 
 
<script type="text/javascript"> 
 
var oDoc, sDefTxt; 
 

 
function initDoc() { 
 
    oDoc = document.getElementById("textBox"); 
 
    sDefTxt = oDoc.innerHTML; 
 
    if (document.compForm.switchMode.checked) { setDocMode(true); } 
 
} 
 

 
function formatDoc(sCmd, sValue) { 
 
    if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); } 
 
} 
 

 
function validateMode() { 
 
    if (!document.compForm.switchMode.checked) { return true ; } 
 
    alert("Uncheck \"Show HTML\"."); 
 
    oDoc.focus(); 
 
    return false; 
 
} 
 

 
function setDocMode(bToSource) { 
 
    var oContent; 
 
    if (bToSource) { 
 
    oContent = document.createTextNode(oDoc.innerHTML); 
 
    oDoc.innerHTML = ""; 
 
    var oPre = document.createElement("pre"); 
 
    oDoc.contentEditable = false; 
 
    oPre.id = "sourceText"; 
 
    oPre.contentEditable = true; 
 
    oPre.appendChild(oContent); 
 
    oDoc.appendChild(oPre); 
 
    } else { 
 
    if (document.all) { 
 
     oDoc.innerHTML = oDoc.innerText; 
 
    } else { 
 
     oContent = document.createRange(); 
 
     oContent.selectNodeContents(oDoc.firstChild); 
 
     oDoc.innerHTML = oContent.toString(); 
 
    } 
 
    oDoc.contentEditable = true; 
 
    } 
 
    oDoc.focus(); 
 
} 
 

 

 
</script> 
 
<style type="text/css"> 
 
.intLink { cursor: pointer; } 
 
img.intLink { border: 0; } 
 
#toolBar1 select { font-size:10px; } 
 
#textBox { 
 
    width: 540px; 
 
    height: 200px; 
 
    border: 1px #000000 solid; 
 
    padding: 12px; 
 
    overflow: scroll; 
 
} 
 
#textBox #sourceText { 
 
    padding: 0; 
 
    margin: 0; 
 
    min-width: 498px; 
 
    min-height: 200px; 
 
} 
 
#editMode label { cursor: pointer; } 
 
</style> 
 
</head> 
 
<body onload="initDoc();"> 
 
<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"> 
 
<input type="hidden" name="myDoc"> 
 
<div id="toolBar2"> 
 
<!-- ok -->  
 
<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /> 
 
<!-- not ok/why ? --> 
 
<div class="intLink" onclick="formatDoc('italic');">italic</div> 
 

 
</div> 
 
    <hr> 
 

 
<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div> 
 
<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p> 
 
<p><input type="submit" value="Send" /></p> 
 
</form> 
 
</body> 
 
</html>

источник

2015-05-28 benoît

Это была избранная проблема! Я исправить это с помощью CSS:

.intlink{ 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

источник

2015-05-28 13:29:17

.intlink { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

CSS ваша проблема

источник

2015-05-28 13:30:35

onclick работает только с тегом img

ответ

Смежные вопросы