Tex-inword-PROSAGA-码农传奇

Check it here

How to Use

InWord works with it jQuery and Bootstrap. After Jquery and Bootstrap, just add the inword.js and inword.css, and see the magic!

<!-- CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="inword.css">
<!-- SCRIPT-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="inword.js"></script>

Basic Usage

Just add $(‘element’).inword() to your DOM element, and nothing else!

Key Features

Three Different Styles, use which you require!
Responsive Design/Mobile Friendly
All Modern Browser Compatibility
Up to Trillion support
Negative Figure, Decimal Point detection
Prefix/Suffix Support
Case Utilization Support
Full Customization is possible

Extended Usage

$('elements').inwords({
    type: "helper",                     //default#helper, tooltip, placer
    value: null,                        //if value is given, it will be override origina value
    position: "right",                  //applicable for 'tooltip/helper' only; values : right, left, top, bottom; default: right
    color: "#ffffff",
    backgroundColor: "#47a3da",         
    prefix: null,
    suffix: null,
    placerId: null,                     //DOM id where you want to show the placer, applicable for placer only
    hover: false,                       //applicable for non-input element only
    case: 'ucfirst',                    //ucfirst, upper, lower
    wordJoiner: '-',                    //twenty-five, forty-five, if revoked twenty five, forty five
    thousandSeperator: '',              //nine thousand four hundred sixty, if ',' given, nine thousand, four hundred sixty
    ignoreDecimal: false,               //decimal value will not be shown
});

Disabled Input

InWord has nothing to do with the disabled Input, in such case, take the disabled input inside any DOM element i.e. span, div etc. and define the value and other properties applied on the parent DOM element

<span class="d-inline-block" id="disabledHelper">
    <input type="number" class="form-control" disabled value="546898">
</span>
$('#disabledHelper').inword({value: 546898})

Full Documentation

Parameter	Data Type	Values	Default	Description
type	string	helper \| tooltip \| placer	helper
value	numeric			If ‘value’ is given, it will ignore the original value of the DOM and this value will be shown in words
position	string	right \| left \| top \| bottom	right	applicable for type helper & tooltip, defines which position in words will be shown
color	string		#fff	text color, any valid hex color code
backgroundColor	string		#47a3da	background color, any valid hex color code
prefix	string			prefix will be shown at the front of in words, useful for showing data like ‘$ forty five’
suffix	string			prefix will be shown at the end of in words, useful for showing data like ‘forty five only’
placerId	string			applicable for ‘placer’ only, DOM ID of where to show the inwords value. If this value is given, in word will be shown inside this element in your page. Inword does not handle any event/design of this element except showing the word value inside this element, for any event/design i.e. show/hide this element, user must do it by himself
hover	boolean	true \| false	false	applicalble for only non-input element, decide whether to show Inword on the hover of the element
case	string	ucfirst \| upper \| lower	ucfirst	handle word case of Inwords
wordJoiner	string		-	shows Inwords like ‘twenty-five’, ‘forty-five’, if empty string ‘’ is given for this value, Inwords will be shown as ‘twenty five’, ‘forty five’
thousandSeperator	string			shows Inwords like ‘nine thousand four hundred sixty’, if ‘,’ given for this value, ‘nine thousand, four hundred sixty’
ignoreDecimal	boolean	true \| false	false	if true, decimal value will not be shown