Js 实现点击复制表单内容 , 表单内容的复制。

JavaScript014

Js 实现点击复制表单内容 , 表单内容的复制。,第1张

js实现点击后将文字或图片复制到剪贴板的方法,代码非常简洁实用,具体功能代码如下所示:

<table width="99%" border="0" cellpadding="0" cellspacing="0" class="firtable">

<tr>

<th width="100%" style="color: white"><s:text name="询单明细"></s:text></th>

</tr>

<tr>

<td align="center">

<textarea name="inquiryContact1" id="inquiryContact1" rows="15" cols="60" readonly="readonly"></textarea>

<div id="inquiryInfoDIV" style="display:none">

<s:property value="inquiryContact" escape="false"/>

</div>

<script>dojo.byId("inquiryContact1").innerText=dojo.byId("inquiryInfoDIV").innerText

</script>

</td></tr>

<tr>

<td align="center">

<input type="button" id="button" name="button" value="复制" onclick="copyContact()"/>

</td></tr></table>

<script type="text/javascript">

var i = 0

function copyContact(){

var contat = document.getElementById("inquiryContact1").value

window.clipboardData.setData('text', contat)

if(window.clipboardData.getData('text')==''){

if(i==1){

alert("复制失败,请手动Ctrl+C快捷键复制!")

}else{

alert("复制失败,请重新复制!")

i = 1

}

}else{

alert("内容已经复制到剪贴板!")

}

}

</script>

表单是用form来填写,在提交前可以获取表单里面的数据。我这里用jquery实现。

<html>

<body>

    <form method='post' action=''>

        <label for='inputText'>inputText</label>

        <input type='text' id='inputText'/>

        <br/>

        <label for='checkBox1'>checkBox1</label>

        <input type='checkbox' id='checkBox1'/>

        <br/>

        <label for='checkBox2'>checkBox2</label>

        <input type='checkbox' id='checkBox2'/>

        <!--其他你想填写的表单选项-->

        <input type='button' value='提交表单' id='submitBtn'/>

    </form>

    <script>

        $(document).ready(function()

        {

            $('#submitBtn').click(function(e)

            {

                /*一系列根据自己的意图判断输入框是否已输入内容并决定是否往下执行*/

                

                //获取表单的系列化数据。这会生成一个A=valueA&B=valueB这种形式的字符串。

                var formData = $('form').serialize()

                $.post('目标地址',formData,成功/失败回调函数)

                e.preventDefault()

            })

            

        })

    </script>

</body>

</html>

JS清空表单有二种方法:遍历和reset;

分别如下:

方法1:遍历页面元素

/*

清空FORM表单内容 id:表单ID*/

function ClearForm(id) {

var objId = document.getElementById(id)

if (objId == undefined) {

return

}

for (var i = 0i <objId.elements.lengthi++) {

if (objId.elements[i].type == "text") {

objId.elements[i].value = ""

}

else if (objId.elements[i].type == "password") {

objId.elements[i].value = ""

}

else if (objId.elements[i].type == "radio") {

objId.elements[i].checked = false

}

else if (objId.elements[i].type == "checkbox") {

objId.elements[i].checked = false

}

else if (objId.elements[i].type == "select-one") {

objId.elements[i].options[0].selected = true

}

else if (objId.elements[i].type == "select-multiple") {

for (var j = 0j <objId.elements[i].options.lengthj++) {

objId.elements[i].options[j].selected = false

}

}

else if (objId.elements[i].type == "textarea") {

objId.elements[i].value = ""

}

//else if (objId.elements[i].type == "file") {

// //objId.elements[i].select()

// //document.selection.clear()

// // for IE, Opera, Safari, Chrome

// var file = objId.elements[i]

// if (file.outerHTML) {

// file.outerHTML = file.outerHTML

// } else {

// file.value = ""// FF(包括3.5)

// }

//}

}

}

方法2:使用 reset 按钮

页面中增加:

<!--用来清空表单数据-->

<input type="reset" name="reset" style="display: none" />

触发 reset 事件:

$("input[type=reset]").trigger("click")