功能 features
- 在input文本框中加入提示文字，并且看上去就像是在input内部有一个span元素一样。Add tips in input text, and let it looks like there's a span element in the input.
- 提示文字可以放在input之前，也可以放在之后。Tip can be placed before input field, or after it.
- 能够智能拷贝之前input元素的原始样式，并附加到新的元素上。Support for cloneing the original styles of the input text smartly, and attach them to the new wrap.
示例 demo
文本框 input text
代码 code
$('#input1').inputTip({
tip: 'http://'
});
文本框 input text
* 新的"input"会自动拷贝原先input的大部分样式，并自动减少原先input的宽度以保持整体宽度样式不变。The new "input" can clone most styles from prev input, and reduce the width of prev input to maintain the overall style of width unchanged.
代码 code
$('#input2').inputTip({
tip: '@163.com',
position: 'right'
});
使用 usage
首先在页面上引用css文件和js文件，css文件一般在<head>中添加，js文件一般在</body>之前添加。注意要先引用jquery，再引用该js。
Firstly reference the css and js file of this plugin, the best location of the css reference is in <head>,
and the js is before </body>, make sure the js follows jQuery.
<head>
...
<!--the css for this plugin-->
<link rel="stylesheet" href="css/jquery.inputTip.css"/>
</head>
<body>
...
<!--the js for jquery-->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<!--the js for this plugin-->
<script src="js/jquery.inputTip.js"></script>
</body>
然后在input上执行初始化
then initialize inputTip on input text
$('input[type=text]').inputTip(options);
参数 options
| 名称 name | 类型 type | 默认值 default | 说明 desc |
|---|---|---|---|
| tip | String | '' |
需要加入的提示文字。 the tip text you want to add in. |
| position | String | 'left' |
提示文字的位置，可选'left'或'right'。 the position of the tip, optional 'left' or 'right'. |