Javascript 高亮显示时在文本区域上显示边框和句柄_Javascript_Jquery_Html

Javascript 高亮显示时在文本区域上显示边框和句柄

javascript jquery html

Javascript 高亮显示时在文本区域上显示边框和句柄,javascript,jquery,html,Javascript,Jquery,Html,我已经动态创建了文本区域，这些文本区域嵌套在动态创建的div中。div可以拖动，textarea可以使用jquery调整大小我希望任何特定div/textarea的边框和拖动/调整大小手柄仅在用户单击该特定textarea时显示。我假设我需要使用与DragTable相同的onclick事件，但我不知道如何显示句柄和边框非常感谢您的帮助这是我的密码 <!DOCTYPE html> <html> <meta charset="utf-8" /> <he

我已经动态创建了文本区域，这些文本区域嵌套在动态创建的div中。div可以拖动，textarea可以使用jquery调整大小

我希望任何特定div/textarea的边框和拖动/调整大小手柄仅在用户单击该特定textarea时显示。我假设我需要使用与DragTable相同的onclick事件，但我不知道如何显示句柄和边框

非常感谢您的帮助

这是我的密码

<!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>


正文{背景色：#ccc；}
.dragbox{宽度：10px；高度：10px；填充：0.0em；边距：25px；边框：0；光标：移动；z索引：2}
.textarea1{宽度：300px；高度：300px；填充：0.5em；z索引：3}
#处理{
显示：块；
高度：16px；
宽度：100px；
背景色：红色；
位置：绝对位置；
顶部：-15px；
左：0px；
字体大小：10px；
}
#内容
{
位置：绝对位置；
顶部：150px；
左：0px；
保证金：自动；
z指数：1；
}
var i=0；
var p=25；
}
功能编辑器1（idf）{
//var body=document.body；
//魔法
document.getElementById（idf）.addEventListener（“dblclick”，函数（事件）{
var target=event.target；
if（target.nodeName==“TEXTAREA”）{
var area=new nicEditor（{fullPanel:true}）；
area.addEvent（“模糊”，函数（）{
这就是劝阻（目标）；
});
}
}，假）；
};
函数NewTextArea（id）
{       
id=id+i；
var newdiv=document.createElement（'div'）；
newdiv.setAttribute（'id'，id）；
setAttribute（'class'，'dragbox'）；
newdiv.setAttribute（'iterate'，i）；
newdiv.style.position=“相对”；
newdiv.style.top=p；
newdiv.style.left=p；
newdiv.style.cursor='move'；
newdiv.innerHTML=“将我拖到位置
此处的一些文本”；
newdiv.innerHTML=newdiv.innerHTML+“

”；
newdiv.innerHTML=newdiv.innerHTML+“

”；
newdiv.innerHTML=newdiv.innerHTML+“

”；
文件.getElementById（“frmMain”）.appendChild（newdiv）；
$（函数（）
{
$（“#”+i）.可调整大小(
{
停止：功能（事件、用户界面）
{
var-width=ui.size.width；
var height=ui.size.height；
//警报（“宽度=”+宽度+”高度=+高度）；
比例（宽度、高度、ui.element.context.id）；
}
});
$（“#”+id）.可拖动(
{
停止：功能（事件、用户界面）
{
Stoppos=$（this.position（）；
$（“div#stop”）.text（“stop:\nLeft:+Stoppos.left+”\nTop:+Stoppos.top”）；
//警报（“left=“+Stoppos.left+”top=“+Stoppos.top”）；
Valposition（Stoppos.left，Stoppos.top，$（this.attr（'iterate'））；
}
}); 
$（“#”+i）.draggable（{handle:“#handle”}）；
});  
函数值比例（defaultwidth、defaultheight、id）{
$（'#width'+id）.val（defaultwidth）；
$（'#height'+id）.val（defaultheight）；
}
函数valposition（defaultleft，defaulttop，id）{
$（'#left'+id）.val（defaultleft）；
$（'#top'+id）.val（defaulttop）；
}
i++；
p=p+25；
}

如果我正确理解了问题，只需CSS即可：

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

让我们看看需要查看的代码怎么样。只有html、css和js。（mysql select对我没有任何帮助，因为我没有数据库）我已经删除了php mysql代码，有什么想法吗？ChearShi，这适用于textarea边框，但不适用于div，因为div是一个名为.dragbox的类句柄是另一个名为#handle的css元素。任何想法我都在考虑向动态div添加onclick属性，然后将句柄的可见性更改为visable，但是我的js没有那么强，我不知道正确的语法newdiv.onclick=document.getElementById（'handle'）.style.visibility=“visible”；在css声明中将Visibility设置为hidden，以便#处理我的js出了什么问题？恐怕我帮不上忙，我没有使用你正在使用的任何插件来允许分隔符调整大小，这不是默认的HTML。您可以使用jQuery

click

函数：

$（'div'）。单击（函数（）{/*代码以检查是否存在调整大小句柄*/if（resizeHandles==true）{$（this）.css（'border'，'1px solid#000'）；/*代码以在此处添加调整大小句柄*/}否则{/*与if语句*/}相反）

不，我无法获取div可调整大小的句柄