Use DIV and not A for vin element

This commit is contained in:
2026-02-20 19:46:55 -05:00
parent a89f9881a6
commit f163f6518b
4 changed files with 7 additions and 10 deletions

View File

@@ -6,7 +6,7 @@
<div class="vehicle_vin attribute">
<div class="label"><%=t(:field_vin)%>:</div>
<div class="value" id="vin">
<a href="#" id="copyLink" onclick="handleCopy(event)"><%=split_vin[0] if split_vin%><b><%=split_vin[1] if split_vin%></b></a>
<div id="copyLink" onclick="handleCopy(event)"><%=split_vin[0] if split_vin%><b><%=split_vin[1] if split_vin%></b></div>
</div>
</div>

View File

@@ -19,7 +19,7 @@
<tr>
<th><%= t(:field_vin) %></th>
<td>
<a href="#" onclick="handleCopy(event)"><%= @vin[0] if @vin %><b><%=@vin[1] if @vin%></b></a>
<div onclick="handleCopy(event)"><%= @vin[0] if @vin %><b><%=@vin[1] if @vin%></b></div>
</td>
</tr>

View File

@@ -17,7 +17,7 @@
</div>
<div class="label-sub">
<a href="#" onclick="handleCopy(event)"><%= vehicle.vin.scan(/.{1,9}/)[0] if vehicle.vin %><b><%=vehicle.vin.scan(/.{1,9}/)[1] if vehicle.vin%></b></a>
<div onclick="handleCopy(event)"><%= vehicle.vin.scan(/.{1,9}/)[0] if vehicle.vin %><b><%=vehicle.vin.scan(/.{1,9}/)[1] if vehicle.vin%></b></div>
<% if show_customer %>
<br/>
<%= vehicle.customer %>

View File

@@ -1,12 +1,9 @@
async function handleCopy(event) {
console.log("Copy link clicked");
// 1. Prevent the link from actually navigating
event.preventDefault();
let text;
let link;
// 2. Grab the text from our clicked link
// Grab the text from our clicked link
if(event.target.tagName.toLowerCase() === 'b'){
text = event.target.parentElement.innerText;
link = event.target.parentElement;
@@ -16,15 +13,15 @@ async function handleCopy(event) {
}
try {
// 3. Write to clipboard
// Write to clipboard
await navigator.clipboard.writeText(text);
// 4. Update the UI to show it worked
// Update the UI to show it worked
const originalText = link.innerText;
link.innerHTML = "<b>Copied!</b>";
link.style.color = "#4CAF50"; // Turn green
// 5. Reset after 2 seconds
// Reset after 2 seconds
setTimeout(() => {
// Check if the text is long enough to prevent errors
if (originalText.length >= 8) {