<\/div>\n

Bu yaz\u0131m\u0131zda kullan\u0131c\u0131dan talep edilen hayati \u00f6nem ta\u015f\u0131yan baz\u0131 bilgilerin al\u0131nmas\u0131 esnas\u0131nda kullan\u0131lan bir yap\u0131dan bahsedece\u011fiz.Genellikle bankalar\u0131n internet \u015fubelerinde kullan\u0131lmakta olan KeyPad yap\u0131s\u0131 sayesinde kullan\u0131c\u0131dan al\u0131nan \u015fifrenin keyloger gibi programlar taraf\u0131ndan kaydedilmesini \u00f6nleyebilmek, ve hatta olabilecek t\u00fcrl\u00fc s\u0131k\u0131nt\u0131lara kar\u015f\u0131 daha kompleks tedbirler sa\u011flay\u0131p var olan tu\u015f kombinasyonunu kar\u0131\u015ft\u0131rarak kullan\u0131c\u0131ya g\u00fcvenli \u015fifre giri\u015fini sa\u011flayabilmekteyiz.<\/p>\n

\u015eimdi a’dan z’ye kendi ellerimle olu\u015fturmu\u015f oldu\u011fum KeyPad algoritmas\u0131n\u0131 sizlere sunaca\u011f\u0131m.
\n\u00d6ncelikle KeyPad i\u00e7in css dosyam\u0131z\u0131 olu\u015ftural\u0131m.<\/p>\n

\r\n---KeyPadStyle.css---\r\n\r\nklavye {\r\n    width: 200px;\r\n    border: 1px solid black;\r\n    display: inline-block;\r\n}\r\n\r\ntus, del, rdm {\r\n    display: inline-block;\r\n    box-sizing: border-box;\r\n    -moz-box-sizing: border-box;\r\n    width: calc(25%);\r\n    height: 25px;\r\n    margin: 5px;\r\n    background: black;\r\n    color: white;\r\n    text-align: center;\r\n    font-size: 12px;\r\n    font-weight: bold;\r\n    float: left;\r\n    cursor: pointer;\r\n}\r\n<\/pre>\nKeyPad’i uygulayaca\u011f\u0131m\u0131z html tasla\u011f\u0131n\u0131da a\u015fa\u011f\u0131daki gibi olu\u015fturuyorum.<\/p>\n
\r\n<html>\r\n<head>\r\n    <script type="text\/javascript" src="jquery-1.12.0.min.js"><\/script>\r\n    <script type="text\/javascript" src="KeyPadScript.js"><\/script>\r\n    <link rel="stylesheet" href="KeyPadStyle.css" type="text\/css" media="all" \/>\r\n    <style>\r\n        .input {\r\n            width: 40%;\r\n            height: 29px;\r\n            border: ridge;\r\n            margin-top: 2px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <input class="input sifre" name="uye" type="text" placeholder="\u015eifre" \/>\r\n    <div id="keypad">\r\n        <klavye>\r\n            <tus>1<\/tus>\r\n            <tus>2<\/tus>\r\n            <tus>3<\/tus>\r\n            <tus>4<\/tus>\r\n            <tus>5<\/tus>\r\n            <tus>6<\/tus>\r\n            <tus>7<\/tus>\r\n            <tus>8<\/tus>\r\n            <tus>9<\/tus>\r\n            <rdm>&<\/rdm>\r\n            <tus>0<\/tus>\r\n            <del>\u2190<\/del>\r\n        <\/klavye>\r\n    <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nS\u0131ra KeyPad’i i\u015flevsel hale getirecek jQuery ile olu\u015fturulmu\u015f algoritmaya geldi.<\/p>\n
\r\n---KeyPadScript.js---\r\n$(document).ready(function () {\r\n    $("#keypad").hide();\/\/Sayfan\u0131n ilk a\u00e7\u0131l\u0131\u015f\u0131nda KeyPad\u0131 gizliyoruz.\r\n\r\n    var sifre = "";\r\n    \/\/burada sifreye t\u0131kland\u0131\u011f\u0131 zaman kaypad a\u00e7\u0131lmaktad\u0131r.\r\n    $(".sifre").click(function () {\r\n        sifre = $(this);\r\n\r\n        if ($("#keypad").css("display") == "none") {\r\n            $("#keypad").show(1000);\r\n            \/\/\u015eifre inputuna t\u0131kland\u0131\u011f\u0131nda keypad g\u00f6z\u00fckecektir.\r\n        } else {\r\n            $("#keypad").hide(1000);\r\n            \/\/\u015eifreye bir daha t\u0131kland\u0131\u011f\u0131nda keypad a\u00e7\u0131ksa e\u011fer kapanacakt\u0131r.\r\n        }\r\n    });\r\n\r\n    $(document).on("click", "klavye tus", function () {\r\n        \/\/\u015eifreye keypadden veri giri\u015fi yap\u0131yor.\r\n        sifre.val(sifre.val() + $(this).html());\r\n    });\r\n\r\n    $(document).on("click", "klavye rdm", function () {\r\n        \/\/Bu fonksiyonda keypad kar\u0131\u015ft\u0131r\u0131l\u0131yor.\r\n        var Tuslar = $("klavye").children("tus").toArray();\r\n        Tuslar = Tuslar.sort(function () { return 0.5 - Math.random() });\r\n        $("klavye").html("");\r\n        $.each(Tuslar, function (index, tus) {\r\n            if (index == 1) {\r\n                var yeridegisecektus = $("<rdm>&<\/rdm>");\r\n                $("klavye").prepend(yeridegisecektus);\r\n                \/\/Random tu\u015funun yeri sabitle\u015ftiriliyor.\r\n            } else if (index == 0) {\r\n                var yeridegisecektus = $("<del>\u2190<\/del>");\r\n                $("klavye").prepend(yeridegisecektus);\r\n                \/\/Silme tu\u015funun yeri sabitle\u015ftiriliyor.\r\n            }\r\n            var yeridegisecektus = $("<tus>" + $(this).text() + "<\/tus>");\r\n            $("klavye").prepend(yeridegisecektus);\r\n        });\r\n    });\r\n\r\n    $(document).on("click", "klavye del", function () {\r\n        \/\/\u015eifreye keypadden veri giri\u015fi yap\u0131yor.\r\n        sifre.val(sifre.val().substring(0, sifre.val().length - 1));\r\n    });\r\n\r\n    var Durum = false;\r\n    $("*").click(function (event) {\r\n        \/\/Keypad d\u0131\u015f\u0131na t\u0131kland\u0131\u011f\u0131nda kapanmakta\r\n        if (!Durum) {\r\n            Durum = true;\r\n            return false;\r\n        } else {\r\n            if (!$(event.target).is("klavye") && !$(event.target).is("tus") && !$(event.target).is("del") && !$(event.target).is("rdm") && !$(event.target).is(".sifre")) {\r\n                $("#keypad").hide(1000);\r\n                return;\r\n            }\r\n        }\r\n    });\r\n});\r\n<\/pre>\nBuyurun, g\u00fcle g\u00fcle kullan\u0131n…
\nKaynak dosyay\u0131 indirmek i\u00e7in buraya<\/a> t\u0131klay\u0131n\u0131z.<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
Bu yaz\u0131m\u0131zda kullan\u0131c\u0131dan talep edilen hayati \u00f6nem ta\u015f\u0131yan baz\u0131 bilgilerin al\u0131nmas\u0131 esnas\u0131nda kullan\u0131lan bir yap\u0131dan bahsedece\u011fiz.Genellikle bankalar\u0131n internet \u015fubelerinde kullan\u0131lmakta olan KeyPad yap\u0131s\u0131 sayesinde kullan\u0131c\u0131dan al\u0131nan \u015fifrenin keyloger gibi programlar taraf\u0131ndan kaydedilmesini \u00f6nleyebilmek, ve...<\/p>\n","protected":false},"author":1,"featured_media":3401,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,19],"tags":[748,879],"class_list":["post-3491","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-jquery","tag-jquery","tag-keypad"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=3491"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3491\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3401"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=3491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}