Inputclean plug-in usage, inputclean plug-in

Inputclean plug-in usage, inputclean plug-in

Inputclean plug-in usage
Language: javascript
Is the jquery plug-in,
Purpose: Add ** to the text box and click ** to clear the text box content.
:

Interaction Effect:
1. When the text box is focused, × is displayed permanently, regardless of whether the cursor is on the text box or not (hover );
2. When the focus of the text box is lost, only the mouse hover will display X. Move the mouse away and the X will disappear;
3. Click *. The text box is cleared and the text box is automatically focused.

The entire plug-in contains less than 75 lines, so code is directly pasted:
File Name:Jquery. inputclean. js

/*** Created by huangweii on 2015/7/27. * adds the X of the text box. Click X to clear the content of the text box */$. fn. inputclean = function (option, callback) {var settings = $. extend ({inputClearClass: undefined, deviationTop: undefined/* error in the vertical direction */, deviationLeft: undefined/* error in the horizontal direction */, clickCallback: undefined/* callback event after clearing the text box */, noFocusAfterClean: undefined/* whether to focus on the content after clearing the text box */, parentHoverClass: class of the parent element of the 'inputparentli'/* text box, when used for hover display × */}, Option); function bootstrap ($ that) {var defInputClearClass = 'inputclearbtn '; // under normal circumstances, the font color if (settings. inputClearClass) {defInputClearClass = settings. inputClearClass;} var cleanBtnTop = 11; if (settings. deviationTop) {cleanBtnTop = cleanBtnTop + Number (settings. deviationTop);} var cleanBtn = '<I class = "' + defInputClearClass + '"> </I>'; var $ cleanBtn = $ (cleanBtn); $ that. before ($ cleanBtn ); $ That. data ('inputclean', true); // used to determine whether x console exists. log ($ that. data ('inputclean')/* why do you need to determine if x exists? If there is X, it is displayed when there is content. if there is no content, it is not displayed: if ($ orgFullName. data ('inputclean') {if ($ orgFullName. val () {$ orgFullName. prev (). show ();} else {$ orgFullName. prev (). hide () ;}}**/if (settings. parentHoverClass) {// adds the style of the parent element. It is used when the parent element hover is displayed * $ parentLi = $ that. parent (); if (! $ ParentLi. hasClass (settings. parentHoverClass) {$ parentLi. addClass (settings. parentHoverClass);} var width_input = $ that. width (); if (settings. deviationLeft) {width_input = width_input + settings. deviationLeft;} console. log ('width _ input: '+ width_input); fill cleanbtn.css ('left', (width_input + 12) + 'px'); fill cleanbtn.css ('top', (cleanBtnTop) + 'px '); $that.css ('padding-right', '20px'); $ cleanBtn. click (function (e) {$ that. val (''); // $ cleanBtn. hide (); // hide X if (settings. noFocusAfterClean === undefined | settings. noFocusAfterClean = false) {console. log (settings. noFocusAfterClean); $ that. focus ();} if (settings. clickCallback & typeof settings. clickCallback = 'function') {settings. clickCallback (e) ;}})} return this. each (function () {var $ elem = $ (this); bootstrap ($ elem); if ($. isFunction (callback) callback ($ elem )})};

Parameter description

Parameter Name	Description	Description
InputClearClass	X Style	For example, 'inputclearbtn'
DeviationTop	Vertical Error	The default value is undefined, which may need to be set, especially when the parent label height is not uniform.
DeviationLeft	Horizontal errors	The default value is undefined.
ClickCallback	Callback event after the text box is cleared	For example, after clearing the text box, the submit button should be dimmed.
NoFocusAfterClean	Whether to focus after clearing the text box content	The default value is undefined, indicating focus.
ParentHoverClass	Class of the parent element of the text box, used to display ×	. InputParentLi: hover. inputClearBtn {display: block ;}

Call:

var $orgFullName = $('input[name=orgFullName]');        $orgFullName.inputclean({            deviationTop: 3        }); var $partnerCode = $('input[name=partnerCode]');        $partnerCode.inputclean({            inputClearClass: 'inputClearBtn',            deviationTop: 0,            parentHoverClass: 'inputParentLi',            clickCallback: function (e) {                checkPartnerTrigger();            }        }); var $invoice_title = $('input[name=invoice_title]');    $invoice_title.inputclean({        inputClearClass: 'inputClearBtn',        deviationTop: 0,        parentHoverClass: 'inputParentLi',        deviationLeft: 2    });

The inputClearBtn style I used is:

.inputClearBtn {    position: absolute;    display: none;    width: 24px;    height: 25px;    background: url('http://www.static.chanjet.com/chanjet/images/appstore/delete.png?v=1437103227783') no-repeat;    cursor: pointer;}

Display Effect:

Reference: Use of the placeholder plug-in

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.