在textarea标签旁弹出层并能将数据输入到textarea

最新推荐文章于 2022-07-25 11:13:01 发布

fatOwen

最新推荐文章于 2022-07-25 11:13:01 发布

阅读量2.3k

点赞数

分类专栏： JSP 文章标签： javascript button function div input html

本文链接：https://blog.csdn.net/fatowen/article/details/6282472

版权

JSP 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script>

function showMesg(){

        document.getElementById("dianwo").href="javascript:void(0)";//解决反复点击的问题
        var   msgw,msgh,bordercolor;
        msgw=200;//提示窗口的宽度
        msgh=200;//提示窗口的高度
        bordercolor="#8EB2E9";//提示窗口的边框颜色

        var buttonArea = document.getElementById("dianwo");
        var divLeft = buttonArea.offsetLeft+buttonArea.offsetWidth;
        var divTop = buttonArea.offsetTop+buttonArea.offsetHeight;
        //var divLeft = buttonArea.offsetLeft;
        //var divTop = buttonArea.offsetTop;

        var   msgObj=document.createElement("div")//创建一个div对象（提示框层）
        msgObj.setAttribute("id","msgDiv");
        msgObj.setAttribute("align","center");
        msgObj.style.background="white";
        msgObj.style.border="1px solid "+bordercolor;
        msgObj.style.position   = "absolute";
        msgObj.style.left   = divLeft;
        msgObj.style.top   = divTop;
        msgObj.style.font="12px/1.6em   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif";
        msgObj.style.width   =   msgw   + "px";
        msgObj.style.height   =msgh   + "px";
        msgObj.style.textAlign   = "center";
        msgObj.style.lineHeight   ="25px";
        msgObj.style.zIndex   = "10001";
        msgObj.style.overflowY = "auto";
        msgObj.style.overflowX = "auto";

        msgObj.onblur = function(){ //点击空白处关闭弹出层
         if(document.activeElement.id!="button"){//解决点击层内非法关闭问题
          document.getElementById("dianwo").href="javascript:showMesg();";
         document.body.removeChild(msgObj);//删除提示框层
        }

        }

        var   button=document.createElement("input");//创建一个input对象（提示框按钮）
        button.setAttribute("type","button");
        button.setAttribute("value","确定");
        button.style.width="60px";
        button.style.align="center";
        button.style.background=bordercolor;
        button.style.border="1px   solid "+   bordercolor;
        button.style.color="white";
        button.οnclick=confirm;

function confirm(){

        var testArea = document.getElementById("testArea");
       testArea.focus();
       sel = document.selection.createRange();
       sel.text = "测试";
       sel.select();
            document.getElementById("dianwo").href="javascript:showMesg();";//解决反复点击的问题
            document.body.removeChild(msgObj);//删除提示框层
        }

        document.body.appendChild(msgObj);//在body内添加提示框div对象msgObj
        var strTable='<table><tr><td style="white-space:nowrap;overflow:hidden;">闪电狗</td></tr><tr><td>闪电狗</td></tr></table>';//style="white-space:nowrap;overflow:hidden;"解决了td强制换行的问题
        var strText=strTable;
        var   txt=document.createElement("p");//创建一个p对象（提示框提示信息）
        //txt.style.margin="1em 0"
        txt.setAttribute("id","msgTxt");
        txt.innerHTML=strText;//来源于函数调用时的参数值
        document.getElementById("msgDiv").appendChild(txt);//在提示框div中添加提示信息对象txt
        document.getElementById("msgDiv").appendChild(button);//在提示框div中添加按钮对象button

    }
    </script>
</head>