When the cursor of the input is not visible in version 13.1 of iOS?

I am showing the html page using WKWebView. My problem is that after copying and pasting the page in version 13.1 of iOS, I can't see the cursor in the 'input' of a single paste page. This problem seems to occur only in 13.1 cases.



Problem Reproduction Part


https://i.stack.imgur.com/mnlgw.gif


The part where I paste the page from the js file.

function questionAdd(obj) {



  var act = $(obj).data("role"); // add

  var currentIdx = $("#gameCreateSection .form-wrap").length;



  if (act == "add") {



    var targetIdx = currentIdx + 1; // Number of games to be created



    // Copy the last question append

    var lastQuestion = $("#gameCreateSection .form-wrap").last();

    lastQuestion

      .clone()

      .attr({

        id: "question-" + targetIdx,

        "data-quiz": targetIdx

      })

      .insertAfter(lastQuestion);



    var newQuestion = $("#question-" + targetIdx); // New generation problem



    // Change the ID of the form element (ID redundancy prevention) The ID of the copied element + targetIdx

    newQuestion.find(".form-input").each(function () {

      var elID = $(this).attr("id");

      if (elID == undefined || elID == null || elID == "undefined") {

      } else {

        elID = elID.split("-")[0]; // Import String Region Only

        $(this).attr("id", elID + "-" + targetIdx);

        $(this)

          .prev("label")

          .attr("for", elID + "-" + targetIdx);

      }

    });



    // Other IDs and TEXT processing

    newQuestion

      .find(".form-template")

      .attr("id", "objectiveTemplate-" + targetIdx);

    newQuestion

      .find(".ordered-item-list")

      .attr("id", "objectiveItemList-" + targetIdx);

    newQuestion.find(".example_css").attr("name", "example_" + targetIdx);

    newQuestion.find(".form-input").val(""); // Initialize data entered for replication issues



    $("#objectiveItemList-" + targetIdx)

      .find("li")

      .remove(); //clear existing viewlist

  

$("#objectiveItemList-" + targetIdx).html(
  "  targetIdx +
  "" placeholder="Please enter question" onkeyup="form_keydown(this)">

" +
  "  targetIdx +
  "" placeholder="Please enter question" onkeyup="form_keydown(this)">

"
  );



    // create slide

    if (

      slideSection == "undefined" ||

      slideSection == null ||

      slideSection == undefined

    ) {

      // call up the slide if there is no history of slide generation.

      slideSection = $("#gameCreateSection").bxSlider({

        infiniteLoop: false,

        controls: false,

        pager: false,

        slideMargin: 10,

        touchEnabled: false

      });

    }

    // Go to Added Slides

    var moveTarget = slideSection.getSlideCount();

    slideSection.goToSlide(moveTarget - 1);

    sliedeInx = sliedeInx + 1;


The cursor of the input seems to be visible in the other version. You can also view the input cursors in version `13.3` or `12.4` and `11.4`



Has anyone solved the same problem as me?

Replies

We effectively see 2 cases in the gif.


What do they correspond to ?

- which context when cursor is not showing (iOS 13 ?)

- which context when custor is showing (iOS 12 ?)


It is really hard to understand your code.


Where does the problem occur ?

In form-input ?

in form-template ?

elsewhere ?


Could it be that caret-color has been set to transparent ?

h ttps://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

This issue appears in the form-input. I make a slide by copying an input box with an existing cursor. However, the cursor is not visible in version iOS13.1.


The color of the cursor is already in the class(form-input).