我有以下代码在HTML网页中显示文本框.
<input type="text" id="userid" name="userid" value="Please enter the user ID" />
Run Code Online (Sandbox Code Playgroud)
页面显示时,文本中包含请输入用户ID消息.但是,我发现用户需要单击3次才能选择所有文本(在这种情况下,请输入用户ID).
只需点击一下即可选择整个文本吗?
编辑:
对不起,我忘了说:我必须使用输入 type="text"
我有满足感的div如下所示.
<div style=" border:solid 1px #D31444" contenteditable="true">12 some text...</div>
Run Code Online (Sandbox Code Playgroud)
我需要的是,当我点击div时,所有文本将自动被选中.你能给我解决方案吗?
我有一个contenteditablediv和几段.
这是我的代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="main" contenteditable="true"
style="border:solid 1px black; width:300px; height:300px">
<div>Hello world!</div>
<div>
<br>
</div>
<div>This is a paragraph</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
假设,我想做一个范围选择,其中包含字符串"world!This is"
怎么做?
我想以编程方式选择页面上的所有文本,其结果与我按下组合键Ctrl + A的结果完全相同.
使用的问题document.getSelection().selectAllChildren(body)是选择还将包括用户无法选择的文本节点,即CSS中定义的<script> </script>节点user-select:none:
<div style="-moz-user-select:none">将被选中</div>
modify选择对象的方法可以像这样使用:
selection.modify("extend", "forward", "documentboundary");
将选择从文档的开头扩展到结尾,这将忽略任何脚本或样式元素的内容和元素-moz-user-select:none- 遗憾的是Firefox不允许documentboundary作为3.参数和word无济于事.
有没有快速的方法来实现这一目标?只需要在Firefox中工作.
编辑(不太好解决方案):选择第一个文本节点,然后selection.modify('extend', 'forward', 'line')重复使用,selection.focusNode而不等于最后一个文本节点 - 但根据文档的长度,这需要几秒钟!
编辑: selection.selectAllChildren将在Chrome中按预期工作,其中user-select:none不会选择文本元素- 不幸的是,在FF中有不同的行为.
编辑:这不是这篇文章的重复,因为我既不解决contenteditable元素也不关心它们;)
我想在单击时选择一个简单的 span 元素的内容
<span
onClick={() => // How do I programmatically highlight the `Click Me!` text?}
>Click Me!</span>
Run Code Online (Sandbox Code Playgroud)
有什么办法可以做到这一点吗?
编辑:很抱歉,问题似乎不够清楚,我不仅想突出显示跨度,而且实际上想触发元素的 dom 选择,因此之后可以复制和/或写入(例如,如果它位于打开了可编辑内容的 div 中)。
我正在尝试创建select all一些文本的功能(在 angular js 中),这些文本以类似于下面给出的结构的格式出现。选择所有文本后,用户可以点击ctrl + c复制相同的文本。
<div ="container">
<div class="header">My example header</div>
<div class="section1">
<span>test content1</span>
<span>test content2</span>
</div>
<div class="section2">
<span>test content3</span>
<span>test content4</span>
</div>
<div class="footer">footer content</div>
</div>
Run Code Online (Sandbox Code Playgroud)
会有一个按钮,通过点击它,所有出现在containerdiv内的文本都需要被选中。我搜索了很多示例,到目前为止,我找到的所有示例都提供了有关如何从 textarea 或 textbox 中选择文本的解决方案。我想知道如何从这样的 html 元素范围中选择所有文本。