Bootstrap the width of the Chinese text box is narrowed and the implementation method of adding a copy of the verification code picture _javascript skill

Source: Internet
Author: User

Today, the project manager just gave me a job to implement this feature: to achieve the Verification Code text box to narrow a little, and then the right to add a copy of the code picture, and in response to the layout of the mobile side when accessing the code picture can keep and verify the Code text box on the same line, this How to do? Hard for a long time, and then found the realization of ideas, the following small series of my thoughts and the realization of the process to share to everyone, have questions welcome to propose, common learning progress!

Realize the idea:

Implementation of the effect diagram

Add bootstrap Grid layout code to the inside of yourself to control the arrangement under different resolutions.

The only prerequisite for this is that your verification code picture height needs to be the same as the height of the input box (the height of the input box is about 34px).

After the simple, so that the verification code pictures overlap in the input box above, the use of absolute layout can be completed.

PS: Remember to add a padding-left value to the input box (slightly larger than your verification code width), otherwise it will block the text.

<style>
#captcha {
border-radius:2px;
Cursor:pointer;
Position:absolute;
Z-index:3;
left:0;
top:0;
}

#validateCode {
padding-left:110px;
}
</style>
<div class= "Form-group col-md-6" >
<label for= "Validatecode" > Verification Code
< small> Click Picture Refresh Verification Code </small>
</label>
<div class= "Input-group" >

<input type= ' text ' class= ' Form-control "
id=" Validatecode "name=" Validatecode "
placeholder=" four-bit character verification Code ">
</div>
</div>

To the main topic to see my solution, this is I wrote a website, the size of the picture is the height of the input box, no need to change the input width, so that the verification code pictures cover the input box, and then add a padding-left value to input, slightly larger than the size of the verification code picture width can , the mobile phone answer is not convenient, go back to elaborate.

The above is a small set to introduce the bootstrap of the Chinese text box to narrow the width and add a copy of the verification code picture to achieve the method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.