Avatar billede visto Seniormester
13. april 2021 - 21:11 Der er 9 kommentarer og
1 løsning

Automatisk placering af curser i søgefelt og aktivering af tastatur (mobil)

Jeg er i gang med mobilvenligt design til mit site. Her er et søgefelt, som kan aktiveres ved klik på et ikon. Hvordan sørger jeg for, at et klik på søgeikonet udløser:
1) at en curser automatisk placeres i feltet
2) at tastaturet vises?

altså: så man efter et klik på søgeikonet med det samme er klar til at indtaste i søgefeltet.
Avatar billede clsc Praktikant
14. april 2021 - 02:15 #1
et input-felt har en autofocus-egenskab. Prøv den :)
Avatar billede visto Seniormester
14. april 2021 - 09:03 #2
Hvordan gør man det?
Avatar billede visto Seniormester
14. april 2021 - 13:35 #3
Ved at  google lidt har jeg fundet at autofocus skal indsættes i stil med:
<input type="text" name="fname" autofocus>
Men det virker ikke hos mig, måske fordi feltet jo ikke vises, når siden loades, men først, når der er klikkes på søge-ikonet. (Jeg bruger XHTML og det bliver så til ...autofocus /> men jeg går ikke ud fra, det er derfor, det ikke virker).

Nu er dette jo html og ikke javascript, som jeg troede var det, der skulle til. Jeg ved ikke om det kan klares i html med den situation, jeg har beskrevet?
Avatar billede ejvindh Guru
14. april 2021 - 14:36 #4
Som jeg forstår det, er det pr design, at mobile enheder ikke tillader at man fremtvinger tastaturet ved åbning af en side. Sådan har det i hvert fald været:

https://www.quora.com/Regarding-the-mobile-browser-Safari-for-both-the-iPhone-and-iPad-with-JavaScript-how-can-I-launch-the-on-screen-keyboard
Avatar billede visto Seniormester
14. april 2021 - 15:20 #5
Det giver jo god mening. Nu er det jo i mit tilfælde ikke en ny side, der åbnes, men et søgefelt der aktiveres på en allerede åben side, uden at siden genloader. Så umiddelbart ville det undre mig, hvis der ikke var en funktion, der kunne gøre det, jeg efterspørger. Så jeg fastholder indtil videre spørgsmålet.
Avatar billede ejvindh Guru
15. april 2021 - 09:09 #6
Det er det der med, at man åbenbart skal læse spørgsmålet ordentligt ;)

Men mon så ikke du har brug for noget i stil med:

html:
<input id="myTextInput" value="Hello world!" />

java script:
var input = document.getElementById('myTextInput');
input.focus();

og evt:
input.select();
Avatar billede ejvindh Guru
15. april 2021 - 09:15 #7
....og nå ja, javascriptet skal du jo så knytte til det ikon, som du nævner.
Avatar billede Birger52 Praktikant
15. april 2021 - 16:54 #8
HTML
Element med icon der klikkes på, skal have id="icon_id"
og input linien id="inp_id"

Hvis input allerede har et name, skal det bruges som id for linien også, og det skal så ændres i js også.


js - separat fil, includeres på de sider du har muligheden :
SetEvent(window, 'load', InitIcon);

function SetEvent(elm, evt, fnc) {        // sætter event handlere på elementer
    if (elm) {
        if (elm.addEventListener) {    //    for rigtige browsere
            elm.addEventListener(evt, fnc, false);
            }
        else if (elm.attachEvent) {    //    for IE
            elm.attachEvent('on'+evt, fnc);
            }
        }
    }

function InitIcon() {
    var form_icon = document.getElementById('icon_id'); // icon_id = id for HTML ikonet der åbener din form
    if (form_icon) SetEvent(form_icon, 'click', SelLine);
    }

function SelLine() {
    var sel_line = document.getElementById('inp_id'); // inp_id = id for HTML input
    if (sel_line) {
        sel_line.focus();
        // sel_line.select(); // Hvis du også vil have al tekst der står i linen valgt/markeret
        }
    }
Avatar billede visto Seniormester
18. april 2021 - 14:42 #9
Denne her er lidt svær at svare på for mig. For jeg behersker ikke selv javascript, forstår dermed ikke sproget. Men jeg vil prøve at videregive det, som førte til løsningen, som kom i stand via offline hjælp i forlængelse af trådens input. Der er tale om søgefeltet til en søgefunktion på sitet.

Det relaterer sig til formularen:
<form method="get" action="/zoom/mysearch.php" id="top_soege_mobil">
    <input name="zoom_query" id="zoom_query_m" type="text" />
    <input name="zoom_and" value="1" type="hidden" />
</form>

Det virksomme script:
function showhideSearch(force){
    var k = document.getElementById('top_soege_mobil');
    var l = document.getElementById('zoom_query_m');
    if (k) {
        if (POBJ.sidemenu==k || force) {
            k.classList.remove('view');
            POBJ.sidemenu = 0;
            }
        else {
            showHideMenuObj(k,'search');
            l.focus();
            }
        }
    }

Jeg håber, at andre, hvis de kommer i samme situation som mig, vil kunne "oversætte" ovenstående til deres situation.
Avatar billede visto Seniormester
18. april 2021 - 14:43 #10
Jeg glemte:
Tak for svar, som hver på deres måde var med til at føre til løsningen.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester





CIO
Har du rost din mellemleder i dag? Snart er de uddøde - og det er et tab
Computerworld mener: Mellemledere lever livet farligt: Topledelsen får konstant ideer med skiftende hold i virkeligheden, og moden går mod flade agile organisationer. Men mellemlederen er en overset hverdagens helt med et kæmpe ansvar. Her er min hyldest til den ofte latterliggjorte mellemleder.
Job & Karriere
Eva Berneke stopper som topchef i KMD og flytter til Paris: Her er KMD's nye topchef
Efter syv år på posten som topchef for KMD forlader Eva Berneke selskabet. Nu flytter hun med familien til Paris, hvor hun vil fortsætte sit bestyrelsesarbejde. KMD har allerede afløser på plads.
White paper
Udnyt ressourcerne bedre og skru op for overskuddet
Spildt arbejde, ineffektive processer og ringe forretningsindsigt er blot tre tegn på ringe ressourceudnyttelse. I dette whitepaper får du viden om, hvordan du måler ressourceudnyttelsen – og bruger indsigten operationelt, taktisk og strategisk.