Avatar billede miss-g Seniormester
28. marts 2018 - 02:29 Der er 6 kommentarer og
1 løsning

Klik på billede = indsæt bogstav i textfield

Jeg ønsker mig en lille funktion - et mini keyboard med kun 3-6 taster, så man kan indsætte specielle tegn, man ikke lige kan finde på sit tastatur....

Vil nogen stykke den lille kode sammen for mig eller henvise til noget (som jeg forhåbentligt forstår).. :-)

Simpelt test-design her:
http://www.syord.dk/test_keys.html

--------------------------------------------------
Koden:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testside</title>
</head>

<body style="margin:10% 0 0 30%; font-size:20px; background:#E4E4E4;">

<form>
<p>Indtast her:</p>
<input style="font-size:20px;" type="text" size="30">
<div style="padding-top:20px;"> <a href="#"><img src="images/char_1.png" height="50" alt=""/></a>
<a href="#"><img src="images/char_2.png" height="50" alt=""/></a>
<a href="#"><img src="images/char_3.png" height="50" alt=""/></a>
</div>

</form>
</body>
</html>
----------------------------------------------
Jeg går ud fra, at det er javascript/jquery - der kan det.... Min side kører i øvrigt PHP og mySql, men det tænker jeg er lige meget i denne sammenhæng.
Avatar billede olsensweb.dk Ekspert
28. marts 2018 - 10:14 #1
måske
https://stackoverflow.com/questions/11076975/insert-text-into-textarea-at-cursor-position-javascript

hurtigt eks
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Testside</title>
<style>
body {
    margin:10% 0 0 30%;
    font-size:20px;
    background:#E4E4E4;   
}
</style>

<script>
// ref https://stackoverflow.com/questions/11076975/insert-text-into-textarea-at-cursor-position-javascript
function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    //MOZILLA and others
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)
            + myValue
            + myField.value.substring(endPos, myField.value.length);
    } else {
        myField.value += myValue;
    }
}
</script>
</head>
<body>
<form>
<p>Indtast her:</p>
<input name="myField" style="font-size:20px;" type="text" size="30">
<div style="padding-top:20px;">
<img src="images/char_1.png" height="50" alt="" onclick="insertAtCursor(myField, '&#244;')"> <!-- 147    ô    &#244; -->
<img src="images/char_2.png" height="50" alt="" onclick="insertAtCursor(myField, '&#227;')"> <!-- 198    ã    &#227; -->
<img src="images/char_3.png" height="50" alt="" onclick="insertAtCursor(myField, '&#223;')"> <!-- 225    ß    &#223; -->
</div>
</form>
</body></html>
Avatar billede olsensweb.dk Ekspert
28. marts 2018 - 13:51 #2
demoer
den der er vist i #1
http://experten.olsensweb.dk/Testside_ver0.html

en forbedring kunne være at lave en extern eventlistner
http://experten.olsensweb.dk/Testside_ver1.html

en anden forbedring kunne være at droppe de img, og bruge en label istedet, er det pæneste IMHO
http://experten.olsensweb.dk/Testside_ver2.html
Avatar billede michael_stim Ekspert
28. marts 2018 - 14:06 #3
FYI.
Der er forskel på ô og ö (ascii 148) samt  ã og ä (ascii 132)
Avatar billede michael_stim Ekspert
28. marts 2018 - 14:10 #4
Går ud fra det er til det tyske alfabet. ü er ascii karakter 129
Avatar billede olsensweb.dk Ekspert
28. marts 2018 - 14:32 #5
#3, #4
yeps, har set det men ville ikke bruge tid på at finde de rigtige værdier, det er ennu en fordel ved at bruge label, og ikke img.
ved label vertionen er tegn på skærm det du får i input felt
Avatar billede miss-g Seniormester
28. marts 2018 - 18:52 #6
Det er så SMUKT hr. Olsen!

Igen tak din hjælp. Så må vi se, om jeg kan finde på mere efterhånden - ha ha  :-)
Avatar billede olsensweb.dk Ekspert
29. marts 2018 - 08:07 #7
@miss-g du bør overveje om tegne skal stå som html Entities eller ej, det rigtige vil være at have det ens alle steder

snippet fra Testside_ver2.html

som html Entities (det du bruger nu)
<label class="AtCursor">&#244;</label>
<label class="AtCursor">&#227;</label>
<label class="AtCursor">&#223;</label>


som tegn (det du vist nok har i databasen)
<label class="AtCursor">ô</label>
<label class="AtCursor">ã</label>
<label class="AtCursor">ß</label>


hvis du skal bruge tekstem ifm søgning, det skal modsvare det du har i databasen.

en søgning på københavn vil ikke finde k&oslash;benhavn og omvendt

hvis du har det blandet, dvs det ene det ene sted og det andet det andet sted, skal du kigge på et af disse 2 link
http://php.net/manual/en/function.htmlentities.php
http://php.net/manual/en/function.html-entity-decode.php
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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