HTML表数据在处理任何文本文档时在顶部添加额外的空间怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (61)

我正在通过ajax生成一个动态表,我想要的是将html表数据复制到记事本并通过另一个应用程序上传这些数据,但问题是当我试图复制html表数据时,它是在记事本顶部添加一个额外的空间,但我不想。任何顶部的空间来完成我的另一项任务。

<html><head>
    
</head>
    <body cz-shortcut-listen="true">
        
        <div>
            <table cellpadding="3" cellspacing="3" class="reportTbl" border="0" align="center" style="float:left">
                <tbody>
				<tr><td>358929090221233</td><td>*DN</td></tr>
				<tr><td>358929090222454</td><td>*DN</td></tr>
				<tr><td>358929090233592</td><td>*DN</td></tr>
				<tr><td>358929090233691</td><td>*DN</td></tr>
				<tr><td>358929090233717</td><td>*DN</td></tr>
				<tr><td>358929090233758</td><td>*DN</td></tr>
				<tr><td>358929090233774</td><td>*DN</td></tr>
				<tr><td>358929090233790</td><td>*DN</td></tr>
				<tr><td>358929090233832</td><td>*DN</td></tr>
				<tr><td>358929090233873</td><td>*DN</td></tr>
				<tr><td>358929090233899</td><td>*DN</td></tr>
				<tr><td>358929090233931</td><td>*DN</td></tr>
				<tr><td>358929090233972</td><td>*DN</td></tr>
				<tr><td>358929090233998</td><td>*DN</td></tr>
				<tr><td>358929090234038</td><td>*DN</td></tr>
				<tr><td>358929090234095</td><td>*DN</td></tr>
				<tr><td>358929090234111</td><td>*DN</td></tr>
				<tr><td>358929090234533</td><td>*DN</td></tr>
				<tr><td>358929090262930</td><td>*DN</td></tr>
				<tr><td>358929090263516</td><td>*DN</td></tr>
				</tbody>
            </table>

        </div>

    





</body></html>

提问于
用户回答回答于

网页中的文本选择是基于页面的文本内容,其中包括空格。CSS不能改变这一点,它只控制文本的显示。JS直接修改DOM:

var text = document.createTextNode("This, from JavaScript, is selectable. ");
document.getElementById('foo').appendChild(text)
div:after {
content: "This, from the CSS, is not selectable. "
}
<div id="foo">This, from the HTML, is selectable. </div>

理论上,你可以编辑HTML(无论是在源文件中,还是在javascript中),以防止在你的内容之前有任何空白供用户首先选择-但这会带来更改站点布局的可能性,或者使源文件更难以维护;在另一个地方处理可能会更好。在将所选内容捕获到剪贴板时,结束并修改所选内容。

拦截和修改用户的剪贴板选择在历史上一直是一个挑战。 我们以前必须依赖Flash applet来拦截剪贴板事件; 复杂的js库仍然存在以支持它,但据我了解安全规则,以下内容应该在现代浏览器中用于用户启动的“复制”事件:

function trimSelection(e) {
  e.preventDefault();

  let text = window.getSelection().toString();
  console.log("Untrimmed selection: '" + text + "'")
  console.log("Trimmed selection: '" + text.trim() + "'")
  if (e.clipboardData) {
    e.clipboardData.setData('Text', text.trim());
  } else {
    console.error("Couldn't set clipboardData");
  }
}

document.addEventListener('copy', trimSelection);
<div class="border">
  <br>
  <p>Select and copy me, with or without the leading whitespace</p>
</div>

<textarea placeholder="paste into me"></textarea>

扫码关注云+社区

领取腾讯云代金券