0

Below is the entirety of the javascript code in question This code works on desktop, however on an android device, it fails to colour the table element green Presumably the listeners are what's broken but I do not have extensive debugging on the particular android device, the input device is a scanner, something which I also have for my desktop.

<script>
//    document.getElementById("title").setAttribute("innerHTML", "")
    let text = ""
    document.addEventListener('keydown', (event) => {
        if (event.key != 'Enter') {
            var name = event.key;
            var code = event.code;
            text += event.key
        }
    }, false);

    document.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            console.log(text)
            //myFunction(1);
            TableIt(text);
            text = ""
        }
    })
    function myFunction(string) {
        document.getElementById(string).setAttribute("bgcolor","#dee")
    }

    function TableIt(text) {
        var table = document.getElementById("VareTable");
            for (var i = 0, row; row = table.rows[i]; i++) {
   //rows would be accessed using the "row" variable assigned in the for loop
                for (var j = 0, col; col = row.cells[j]; j++) {
                    if (col.innerHTML === text) {
                        myFunction(i-1);
                    }
     //columns would be accessed using the "col" variable assigned in the for loop
            }  
        }
    }
</script>

Tried to do eventlistener('input', (event) => { . . . .

but to no success

Edit;

here is the full html above the JS
@page
@model WebStore.Pages.VareModel
@{
}
<br />
<h2 id="title">@(Model.Loc.Location)</h2>
<table class="table" id="VareTable">
    <thead>
        <tr>
            <th>Item</th>
            <th>Quantity</th>
            <th>Description</th>
            <th>EanNum</th>
        </tr>
    </thead>
    <tbody>
@foreach (var Info in Model.listItems) 
{
            <tr id="@Info.ItemID">
            <td>@Info.Item</td>
            <td>@Info.Qty</td>
            <td>@Info.Description</td>
            <td id="@Info.ItemID ean">@Info.EAN</td>
        </tr>
}
    </tbody>
</table>
Ildfugl
  • 3
  • 2
  • Why have two different listeners rather than just an `if`/`else`? What purpose do the `var name = event.key; var code = event.code;` statements in the first listener serve, as they're never used? Why use `getElementById` when you already have `col` (or `row`)? (Is that the same element? Or is something more going on here?) Also note that `bgcolor` is ***seriously*** obsolete; use a class and a CSS rule instead, or (second-best) `.style.backgroundColor = "#dee";`. – T.J. Crowder Feb 07 '23 at 09:34
  • What does the HTML this is operating on look like? Please update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button); [here's how to do one](https://meta.stackoverflow.com/questions/358992/). – T.J. Crowder Feb 07 '23 at 09:36
  • It's ASP.net html, I'm not sure how I'd manage to turn that into a runnable snippet, however. As for the IF/else, that's honestly just a mistake on my part, and a good point, the var code was for testing and I have simply forgotten to remove it.. I'm not sure about the var name = event.key, but I do believe its for the same reason. – Ildfugl Feb 07 '23 at 09:46
  • Nothing in the above is ASP.net, it's purely JavaScript and HTML. – T.J. Crowder Feb 07 '23 at 09:51
  • This is probably related: https://stackoverflow.com/questions/59426933/key-code-from-keyboardevent-in-android-is-unidentified Good luck with it! – T.J. Crowder Feb 07 '23 at 09:51
  • is the model binding not ASP functionality? Anyway, That seems to suggest using the input eventlistener, which does not seem to work, regardless, thank you. – Ildfugl Feb 07 '23 at 09:59
  • The model binding is completely irrelevant to your question. What do you mean that `input` "does not seem to work"? `input` is ***the*** most reliable event for keyboard (and other) input. – T.J. Crowder Feb 07 '23 at 10:07

1 Answers1

0

Given the difficulty of reliably getting the character on keydown on Android browsers and the complexity of building up a string from keydown events, I'd abandon that approach entirely. It looks like you want to collect a sequence of characters and then act on them when an Enter is received. That's exactly what a form with a single text input will do.

const table = document.getElementById("VareTable");
const input = document.getElementById("the-input");
const form = document.getElementById("the-form");
input.focus();

form.addEventListener("submit", (event) => {
    // Don't actually submit the form
    event.preventDefault();
    // Get the text, clear it for next time
    const text = input.value;
    input.value = "";
    // Refocus just in case
    input.focus();
    // Process this text
    process(text);
});

function process(text) {
    // This looks through all cells in the table and toggles
    // a class on them depending on whether they match the
    // text. You can adapt it to work by rows instead if you
    // like.
    for (const col of table.querySelectorAll("td")) {
        const match = col.textContent === text;
        col.classList.toggle("highlight", match);
    }
}
.highlight {
    background-color: #dee;
}
<form id="the-form">
    <input type="text" id="the-input">
</form>
<table id="VareTable">
    <tbody>
        <tr>
            <td>a</td>
        </tr>
        <tr>
            <td>ab</td>
        </tr>
        <tr>
            <td>abc</td>
        </tr>
    </tbody>
</table>

That works just fine on my Android tablet. You might be able to hide the input, but doing so may make it impossible to focus, which would probably break it.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875