Vraag HTML-mobiel - om het zachte toetsenbord te verbergen


Ik ontwikkel de frontend-site voor een kortingsbonbedrijf en ik heb een pagina waarop de gebruiker alleen het telefoonnummer en de uitgegeven $$ hoeft in te voeren. We bedachten een leuk op het scherm gebouwd toetsenbord met Javascript, dat gebruiksvriendelijk en snel is. Ik ben echter op zoek naar een oplossing om te voorkomen dat het zachte toetsenbord knalt wanneer de gebruiker scherpstelt en tekst / cijfers in die velden invoert.

Ik weet wat de kenmerken van het type / type / telefoon / e-mailadres zijn waarmee HTML5 is gekomen. Op het risico echter dat ik gek ga klinken, wil ik echt mijn toetsenbord op het scherm gebruiken.

Opmerking: deze website is meestal gericht op tablets.

Bedankt.


31
2018-06-07 21:40


oorsprong


antwoorden:


Omdat het zachte toetsenbord deel uitmaakt van het besturingssysteem, kun je het vaker wel dan niet verbergen. Ook verbergt op iOS het toetsenbord de focus van het element.

Als u echter de onFocus attribuut op de invoer en dan blur() de tekstinvoer onmiddellijk, het toetsenbord zal zichzelf verbergen en de onFocus gebeurtenis kan een variabele instellen om te definiëren welke tekstinvoer als laatste is gefocust.

Wijzig vervolgens uw on-page toetsenbord om alleen de laatste gerichte (controleer met behulp van de variabele) tekstinvoer te wijzigen in plaats van een toetsdruk te simuleren.


35
2018-06-07 22:20



Het antwoord van Scott S werkte perfect.

Ik codeerde een op het web gebaseerd telefoontoetsenblok voor mobiel en elke keer dat de gebruiker op een cijfer op het toetsenblok drukte (bestaande uit td span-elementen in een tabel), zou het softkeybord tevoorschijn komen. Ik wilde ook dat de gebruiker niet kon tikken in het invoervak ​​van het nummer dat wordt gebeld. Dit loste beide problemen in 1 shot op. Het volgende werd gebruikt:

<input type="text" id="phone-number" onfocus="blur();" />

37
2018-03-19 20:43



Voor meer lezers / zoekers:

Als Rene Pot wijst erop dit onderwerp,

Door het invoerveld in te stellen op readonly="true" je zou moeten voorkomen   iemand die er iets in invoert, maar nog steeds een klik kan lanceren   evenement erop.

Met deze methode kunt u voorkomen dat u het "zachte" toetsenbord opduikt en nog steeds klikgebeurtenissen start / de invoer vult met een toetsenbord op het scherm.

Deze oplossing werkt ook goed met datum-tijd-pickers die over het algemeen al besturingselementen implementeren.


15
2017-09-08 09:19



Die antwoorden zijn niet slecht, maar ze zijn beperkt omdat ze je niet echt toestaan ​​om gegevens in te voeren. We hadden een soortgelijk probleem waarbij we barcodelezers gebruikten om gegevens in een veld in te voeren, maar we wilden het toetsenbord onderdrukken.

Dit is wat ik heb samengesteld, het werkt best goed:

https://codepen.io/bobjase/pen/QrQQvd/

<!-- must be a select box with no children to suppress the keyboard -->
input: <select id="hiddenField" /> 
<span id="fakecursor" />

<input type="text" readonly="readonly" id="visibleField" />
<div id="cursorMeasuringDiv" />

#hiddenField {
  height:17px; 
  width:1px;
  position:absolute;
  margin-left:3px;
  margin-top:2px;
  border:none;
  border-width:0px 0px 0px 1px;
}

#cursorMeasuringDiv {
  position:absolute;
  visibility:hidden;
  margin:0px;
  padding:0px;
}

#hiddenField:focus {
  border:1px solid gray;  
  border-width:0px 0px 0px 1px;
  outline:none;
  animation-name: cursor;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes cursor {
    from {opacity:0;}
    to {opacity:1;}
}

// whenever the visible field gets focused
$("#visibleField").bind("focus", function(e) {
  // silently shift the focus to the hidden select box
  $("#hiddenField").focus();
  $("#cursorMeasuringDiv").css("font", $("#visibleField").css("font"));
});

// whenever the user types on his keyboard in the select box
// which is natively supported for jumping to an <option>
$("#hiddenField").bind("keypress",function(e) {
  // get the current value of the readonly field
  var currentValue = $("#visibleField").val();

  // and append the key the user pressed into that field
  $("#visibleField").val(currentValue + e.key);
  $("#cursorMeasuringDiv").text(currentValue + e.key);

  // measure the width of the cursor offset
  var offset = 3;
  var textWidth = $("#cursorMeasuringDiv").width();
  $("#hiddenField").css("marginLeft",Math.min(offset+textWidth,$("#visibleField").width()));

});

Wanneer u klikt in de <input> in het vak, simuleert het een cursor in dat vak, maar wordt de focus echt op een leeg geplaatst <select> doos. Select-vakjes laten natuurlijk toe dat toetsaanslagen ondersteuning bieden voor het springen naar een element in de lijst, dus het was slechts een kwestie van het omleiden van de toetsaanslag naar de oorspronkelijke invoer en het compenseren van de gesimuleerde cursor.

Dit werkt niet voor backspace, verwijderen, enz ... maar we hadden deze niet nodig. Je zou waarschijnlijk de trigger van jQuery kunnen gebruiken om de toetsenbordgebeurtenis ergens naar een andere invoerdoos te sturen, maar daar hoefden we ons niet mee bezig te houden, dus deed ik het niet.


1
2018-05-09 16:29



voorbeeld hoe ik het heb gemaakt, nadat ik een maximale lengte heb ingevuld, wordt het vervaagd door mijn Veld (en het toetsenbord verdwijnt), als je meer dan één veld hebt, kun je gewoon de regel toevoegen die ik '//' toevoeg

var MaxLength = 8;
    $(document).ready(function () {
        $('#MyTB').keyup(function () {
            if ($(this).val().length >= MaxLength) {
               $('#MyTB').blur();
             //  $('#MyTB2').focus();
         }
          }); });

0
2017-10-16 09:04