當突出顯示時在textarea上顯示邊框和句柄

我已經動態創建了嵌套在動態創建的divs中的textareas。該divs draggabnle和textareas可調整大小使用jQuery。當突出顯示時在textarea上顯示邊框和句柄

我想要邊框和任何paticular div/textarea的拖動/調整大小的句柄，只有當用戶點擊那個paticular textarea時纔會出現。我假設我需要使用與可拖動的相同的onclick事件，但我沒有使得手柄和邊框顯示的js知識。

任何幫助非常感謝

這裏是我的代碼

<!DOCTYPE html> 
<html> 
<meta charset="utf-8" /> 
<head> 
<style> 
    body{background-color:#ccc;} 
    .dragbox{width:10px; height:10px;padding: 0.0em; margin:25px; border:0;cursor:move; z-index:2} 
    .textarea1{ width: 300px; height: 300px; padding: 0.5em; z-index:3} 
    #handle{ 
     display: block; 
     height: 16px; 
     width: 100px; 
     background-color: red; 
     position: absolute; 
     top:-15px; 
     left:0px; 
     font-size:10px; 
     } 
    #content 
     { 
      position:absolute; 
      top:150px; 
      left:0px; 
      margin:auto; 
      z-index:1; 
     } 
</style> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
<script src = "http://js.nicedit.com/nicEdit-latest.js"></script> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 

<script>   
var i=0;  
var p=25; 



} 
function editor1(idf) { 
//var body = document.body; 
// The magic 
document.getElementById(idf).addEventListener ("dblclick", function (event) { 
    var target = event.target; 

    if (target.nodeName === "TEXTAREA") { 
     var area = new nicEditor ({fullPanel : true}).panelInstance (target); 

     area.addEvent ("blur", function() { 
      this.removeInstance (target); 
     }); 
    } 
}, false); 
}; 

function NewTextArea(id) 
{  
id=id+i; 
var newdiv = document.createElement('div'); 
newdiv.setAttribute('id', id); 
newdiv.setAttribute('class', 'dragbox'); 
newdiv.setAttribute('iterate',i); 
newdiv.style.position = "relative"; 
newdiv.style.top = p; 
newdiv.style.left = p; 
newdiv.style.cursor='move'; 
newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id='"+i +"' onDblClick='editor1("+i+")' name='textarea["+i +"]' class='textarea1' style='position:absolute; top:0px;left:0px;overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>"; 
newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='"+i+"' name='id["+i+"]'><br><input name='box_type["+i+"]' type='hidden' value='text'/>"; 
newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='300' name='width["+i+"]' id='width"+i+"'><br><input type='hidden' value='300' name='height["+i+"]' id='height"+i+"'>";    
newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='0' name='left["+i+"]' id='left"+i+"'><br><input type='hidden' value='0' name='top["+i+"]' id='top"+i+"'>";   

document.getElementById("frmMain").appendChild(newdiv); 
$(function() 
{ 

    $("#"+i).resizable(
    { 
     stop: function(event, ui) 
     { 
      var width = ui.size.width; 
      var height = ui.size.height; 
      // alert("width="+width+"height="+height); 
      ValProportions(width,height,ui.element.context.id);   
     } 
    }); 

    $("#"+id).draggable(
    { 
     stop: function(event, ui) 
     { 
      Stoppos = $(this).position(); 
      $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top); 
       // alert("left="+Stoppos.left+"top="+Stoppos.top); 
      ValPostion(Stoppos.left,Stoppos.top,$(this).attr('iterate')); 
     } 
    }); 
    $("#"+i).draggable({handle:"#handle"}); 
}); 

function ValProportions(defaultwidth, defaultheight,id) { 
    $('#width'+id).val(defaultwidth); 
    $('#height'+id).val(defaultheight); 
    } 
function ValPostion(defaultleft,defaulttop,id) { 
    $('#left'+id).val(defaultleft); 
    $('#top'+id).val(defaulttop); 
    } 
i++; 
p=p+25;  
} 
</script> 



</head> 

<body> 
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div5.php" method="post"> 
<input id="btn1" type="button" value="Add New textbox" onClick="NewTextArea('draggable');"/> 

<input type="submit" value="Save Page" > 


</form> 
</body> 
</html>

來源

2013-03-14 Barry Watts

剛纔向我們展示我們需要查看的代碼，只是HTML，CSS和JS。（MySQL選擇不幫我什麼，因爲我沒有得到數據庫） – caramba 2013-03-14 11:05:51

我已經刪除了PHP的MySQL代碼，任何想法？歡呼 – 2013-03-14 11:07:40

如果我理解正確的問題，這可以用CSS來實現：

textarea { resize:none; border:none; } 
textarea:focus { resize:both; border:1px solid #000; }

JSFiddle example。

來源

2013-03-14 11:07:15

嗨，這與textarea邊界的工作，但它不能與div工作，因爲div是一個叫.dragbox的類該句柄是另一個叫做#handle的CSS元素。任何想法 – 2013-03-14 11:25:38

我正在尋找添加onclick attrribute到動態div，然後將可視化的句柄更改爲可見，但我的js不是那麼強大，我不知道正確的語法newdiv.onclick = document.getElementById（'handle' ）.style.visibility = 「可見」;並將可見性設置爲隱藏在#handle的css聲明中我的js有什麼問題？ – 2013-03-14 11:29:39

我無法提供幫助我很害怕，我沒有使用您使用的任何插件來允許分隔符的大小可調，並且這不是默認的HTML。你可以使用jQuery的'click'函數：'$（'div'）。click（function（）{/ *代碼檢查是否存在調整大小的句柄*/if（resizeHandles === true）{$（this ）.css（'border'，'1px solid＃000'）;/*在這裏添加調整大小句柄的代碼* /} else {/ * if語句的反面* /}}）' – 2013-03-14 11:53:48

當突出顯示時在textarea上顯示邊框和句柄

回答

相關問題