java 文本域 单击文字_用户单击时如何自动突出显示文本

网站上的某些内容是要由用户复制的，例如URL地址，自动生成的API密钥或几行代码（代码段）。 但是复制这些内容可能是一个挑战，特别是对于使用触控板或a脚鼠标的用户而言。 因此，让他们更轻松。

如果您偶然发现了TheNextWeb之类的网站，则将在您单击该链接时将其突出显示。 让我们看看这是如何完成的。

入门

首先，我们对包装短链接URLHTML进行布局。

<div class="shortlink">
	<span class="shortlink__label">Shortlink</span>	
	<div class="shortlink__container">
		<i class="shortlink__icon ion ion-link"></i>
		<span class="shortlink__url">http://goo.gl/9JEpOz</span>
	</div>
</div>

我们将URL包裹在span元素中，以及来自Ionicon的图标。 这些元素的样式完全取决于您，因为这取决于您的网站布局。 但是，出于此演示的目的，我将这种方式设置为：

它是简单，蓝色和正方形（请在此处获取样式代码 ）。

JavaScript

这是代码的精髓，JavaScript。 此处的计划是在用户单击URL时突出显示URL 。

我们以一个变量开始代码，该变量选择用户将在其中单击的元素。

var target = document.querySelector('.shortlink');

querySelector是用于选择元素JavaScript方法。 它基本上像jQuery构造函数$() 。 您可以使用点表示法通过类获取元素，也可以使用#表示法通过ID获取元素。

接下来，我们需要创建一个新JavaScript函数。

function selection(elem) {
	
}

我们将函数命名为selection() 。 如上所示，该函数需要一个参数来传递包装URL或我们要突出显示的任何常规文本的元素。 在我们的例子中，这将是带有shortlink__url类的span元素。

在此函数中，我们添加了两个更多的变量：

var target = document.querySelector('.shortlink');

function selection(elem) {
	var elem   = document.querySelector(elem);
	var select = window.getSelection();
	var range  = document.createRange();
}

首先， elem变量选择我们通过函数参数传递的元素。 第二个变量select ，运行本机JavaScript函数以获取文本选择。 最后一个变量range控制选择范围； 我们希望确保选择仅在所选元素内。

接下来，我们将这些变量与其他两个JavaScript函数链接起来，如下所示：

var target = document.querySelector('.shortlink');

function selection(elem) {
	var elem   = document.querySelector(elem);
	var select = window.getSelection();
	var range  = document.createRange();

	range.selectNodeContents(elem);
	select.addRange(range);
}

第一个添加项range.selectNodeContents(elem)定义了选择范围 ，在这种情况下，选择范围是elem中引用的elem 。 最后一行select.addRange(range)将选择限制在指定的范围内。

大！ 我们都设置了功能。 让我们付诸行动。

运行

我们将目标元素与onclick事件绑定。 单击该元素后，我们将运行刚刚创建的函数，并使用包裹URL的元素的类名传递参数。 在这种情况下，它是.shortlink__url 。

target.onclick = function() {
	selection('.shortlink__url');
};

我们完了。 如前所述，您还可以对网站上的其他类型的内容执行此操作，您可能希望用户更轻松地进行复制。

某些人可能想知道我们是否可以在用户单击时自动复制而不是仅突出显示shorturl。 虽然这似乎是一个不错的主意，但不幸的是，它并非很容易实现，并且可能导致不良的用户体验。 复制操作应完全在用户的同意下进行。

这篇文章中的步骤仅适用于突出显示操作。 我们的用户是否复制它完全取决于他们。

您可以通过以下链接查看演示或下载源代码。

• 观看演示
• 下载源

翻译自: https://www.hongkiat.com/blog/auto-highlight-text-user-click/