jQuery: изменить структуру ввода - PullRequest
Новая
       15

jQuery: изменить структуру ввода

1 голос
/ 18 октября 2010

Я написал сегодня, потому что мне нужна помощь с простой функцией в jquery для изменения структуры ввода [reCaptcha] и скрытия показанного изображения.

Код страницы (страниц), содержащейПлагин reCaptcha:

http://pastebin.com/Qahph2ZB

Возможно ли сделать это в Jquery?

ДО ------------------------------------------------------------> ПОСЛЕ

BEFORE> AFTER

(Потому что я видел видео сценария [Сделано в Js / Jquery], который создает этот эффект: - (

Я пробовал, ноничего: - (

PS: я не могу изменить исходную структуру страницы :-( ... Я хотел бы добавить Jquery с помощью Greasemonkey.

Заранее спасибо.

С уважением

Luca.

1 Ответ

1 голос
/ 18 октября 2010

Вы можете использовать CSS для размещения DIV-элементов над текстом и областью ввода капчи?

Проверьте полный источник здесь: http://gist.github.com/632560

Если вы измените свой код (Я использую код со страницы 1) для следующего: 

<div id="DivCaptcha">
    <!-- <span class="Instructions" id="Instructions">Fill the captcha.</span> -->
    <span class="Instructions" id="Instructions">Fill the captcha.</span>
    <form onsubmit="return submit();" action="">
    <div id="captcha-container">
        <script type='text/javascript'> var RecaptchaOptions = { theme : 'white' }; </script> <script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfF970SAAAAAFR6KJNsdJX6Itf43k_HWbxRcU4a "></script>
        <noscript>
            <iframe src="http://api.recaptcha.net/noscript?k=6LfF970SAAAAAFR6KJNsdJX6Itf43k_HWbxRcU4a " height="300" width="500" frameborder="0"></iframe><br/>
            <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
            <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
        </noscript>       
        <div id="cover-captcha">
        </div>      
        <div id="cover-input">
        </div>
    </div>
    <input type="submit" id="submit" value="Submit!">
</div>

И затем вы добавляете следующий CSS на свою страницу: 

#captcha-container {
    position:relative;
}
#cover-captcha {
    position:absolute;
    top:10px;
    left:10px;
    width:295px;
    height:55px;
    z-index:9999;
    background-color:#fff;
}
#cover-input {
    position:absolute;
    top:96px;
    left:26px;
    width:150px;
    height:20px;
    z-index:9999;
    background-color:#fff;
}

Это покроет элементы, которые вы хотите покрыть,Затем вы можете использовать jQuery, чтобы показать / скрыть эти элементы, когда вам это нужно: 

<input type="button" id="show-hide" value="Show/Hide Captcha fields"/>
<script>
    $("#show-hide").click(function(e){
        $("#cover-captcha, #cover-input").toggle();
    });
</script>

РЕДАКТИРОВАТЬ: В ответ на ваш комментарий .. Попробуйте это: 

$("#recaptcha_response_field").hide();
$("#recaptcha_image").hide();
...