Captcha által küldött üzenetnek design hozzáadása?
Sziasztok!
A Captcha üzeneteinek hogyan tudok designt adni, betűszín, háttér, betűtípus, stb, minden ami css-el lehetséges?
"Please Enter CAPTCHA Code." - ezekre gondolok, ezeket szeretném formázni!
A kód:
<script type="text/javascript">
// Captcha Script
function checkform(theform){
var why = "";
if(theform.CaptchaInput.value == ""){
why += "- Please Enter CAPTCHA Code.\n";
}
if(theform.CaptchaInput.value != ""){
if(ValidCaptcha(theform.CaptchaInput.value) == false){
why += "- The CAPTCHA Code Does Not Match.\n";
}
}
if(why != ""){
alert(why);
return false;
}
}
var a = Math.ceil(Math.random() * 9)+ '';
var b = Math.ceil(Math.random() * 9)+ '';
var c = Math.ceil(Math.random() * 9)+ '';
var d = Math.ceil(Math.random() * 9)+ '';
var e = Math.ceil(Math.random() * 9)+ '';
var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("CaptchaDiv").innerHTML = code;
// Validate input against the generated number
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('CaptchaInput').value);
if (str1 == str2){
return true;
}else{
return false;
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(' ').join('');
}
</script>
Köszönöm mindenkinek! :-)
Ezzel szeretném, ha működne a Captcha alert, de nem tudtam jól összehangolni a kettőt sajnos.
Így talán pontosabb, hogy mit is szeretnék...
var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt);
}
}
function createCustomAlert(txt) {
d = document;
if(d.getElementById("modalContainer")) return;
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
mObj.style.height = d.documentElement.scrollHeight + "px";
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
alertObj.style.visiblity="visible";
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
msg = alertObj.appendChild(d.createElement("p"));
//msg.appendChild(d.createTextNode(txt));
msg.innerHTML = txt;
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
btn.focus();
btn.onclick = function() { removeCustomAlert();return false; }
alertObj.style.display = "block";
}
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
function ful(){
alert('Alert this pages');
}
<style>
#modalContainer {
background-color:rgba(0, 0, 0, 0.3);
position:absolute;
top:0;
width:100%;
height:100%;
left:0px;
z-index:10000;
background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}
#alertBox {
position:relative;
width:33%;
min-height:100px;
max-height:400px;
margin-top:50px;
border:1px solid #fff;
background-color:#fff;
background-repeat:no-repeat;
top:30%;
}
#modalContainer > #alertBox {
position:fixed;
}
#alertBox h1 {
margin:0;
font:bold 1em Raleway,arial;
background-color:#f97352;
color:#FFF;
border-bottom:1px solid #f97352;
padding:10px 0 10px 5px;
}
#alertBox p {
height:50px;
padding-left:5px;
padding-top:30px;
text-align:center;
vertical-align:middle;
}
#alertBox #closeBtn {
display:block;
position:relative;
margin:10px auto 10px auto;
padding:7px;
border:0 none;
width:70px;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#f97352;
border-radius: 0px;
text-decoration:none;
outline:0!important;
}
/* unrelated styles */
#mContainer {
position:relative;
width:600px;
margin:auto;
padding:5px;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
}
h1,h2 {
margin:0;
padding:4px;
}
code {
font-size:1.2em;
color:#069;
}
#credits {
position:relative;
margin:25px auto 0px auto;
width:350px;
font:0.7em verdana;
border-top:1px solid #000;
border-bottom:1px solid #000;
height:90px;
padding-top:4px;
}
#credits img {
float:left;
margin:5px 10px 5px 0px;
border:1px solid #000000;
width:80px;
height:79px;
}
.important {
background-color:#F5FCC8;
padding:2px;
}
@media (max-width: 600px)
{
#alertBox {
position:relative;
width:90%;
top:30%;
}
</style>
válasza:Elég szar captcha az ahol egy kliens oldali HTML tagben van benne a captcha érték.
Ez a kérdés valami poén akart lenni?
Szia!
Akkor hogyan kéne a kódot átírni? :-))))))
Üdv!
válasza:Hát ne kliens, hanem szerver oldalon legyen. Kb minden programnyelvhez kismillió captcha könyvtár van, illetve olyan szolgáltatásokat is használhatsz mimt pl a Google Recaptcha. A működés röviden annyi, hogy szerveren legenerálsz egy képet amin random betűk vannak (és az automatikus felismerést zavaró véletlenszerű elemek), elrakod a megoldást mondjuk sessionbe (simán cookie-ba nem jó mert azt könnyű automatikusan kiolvasni), aztán amikor a felhasználó elküldi megnézed jó betűket küldött-e vissza. (Persze vannak variációk, a Google pl képeket ismertet fel, táblák helyét jelölteti ki, stb)
Ha én egy "gonosz" botot akarnék írni ami automatikusan pl spamet küld akkor az nem futtatna JavaScriptet csak elküldözgetné a HTTP kéréseket, így a kliensoldali captchád mit sem érne.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!