1.获取剪切板内容
场景:在粘贴时将粘贴内容按换行粘贴到不同输入框,类似粘贴注册码之类的多个输入框一次粘贴功能。
主要技术:input元素onpaste方法,入参是event,也可以直接获取event,内容在event.clipboardData中,items属性可以看具体内容对象,使用getData("text")方法可以获取到内容,参数还可以是Text,text/plain等。
扩展:富文本,contenteditable=true;document.createRange(),window.getSelection(),selection.removeAllRangs(),range.selectNodeContents(元素),selection.addRange(range)。另外还有一个最主要是,document.execCommand('copy')、粘贴、加粗等等,是富文本的关键功能。
2.获取上传文件内容
上传文件内容首先是通过input的onchange方法获取,里边有files对象列表,但是这里只能看到文件大小、格式等信息,要看文件内容,则要借助FileReader对象(需要注意兼容性),使用FileReader实例化对象的readAsText方法来读取文件内容,参数是前边的files单个对象,读取后可使用onload接收,内容在result中
1 <input type="file" onchange="upload(this)" /> 2 3 function upload(input) { //支持chrome IE10 4 if (window.FileReader) { 5 var file = input.files[0]; 6 filename = file.name.split(".")[0]; 7 var reader = new FileReader(); 8 reader.onload = function() { 9 console.log(this.result) 10 alert(this.result); 11 } 12 reader.readAsText(file); 13 } 14 //支持IE 7 8 9 10 15 else if (typeof window.ActiveXObject != 'undefined'){ 16 var xmlDoc; 17 xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 18 xmlDoc.async = false; 19 xmlDoc.load(input.value); 20 alert(xmlDoc.xml); 21 } 22 //支持FF 23 else if (document.implementation && document.implementation.createDocument) { 24 var xmlDoc; 25 xmlDoc = document.implementation.createDocument("", "", null); 26 xmlDoc.async = false; 27 xmlDoc.load(input.value); 28 alert(xmlDoc.xml); 29 } else { 30 alert('error'); 31 } 32 }
的readAsText方法来读取文件内容,参数是前边的files单个对象,读取后可使用onload接收,内容在result中