js-输入框灰色提示性文字,点击即消失

  • 2019-01-03
  • 308
  • 0

客户需要实现流程的字段提醒功能,在系统找到了开发分享的相关js代码,记录参考一下。目的是实现类似于报销流程的报销事由灰色提示文字,点击即消失,需要js和css两个部分。

代码中_fieldId_shiyou2 = “88”中的88就代表了字段的ID号,字段ID号可以在表单设计器中直接查看,注意这里只要数字部分的内容。表单中插入以下代码块:

<script type="text/javascript">
//报销事由fieldid
var _fieldId_shiyou = "88";
var _shiyouObj = jQuery("#field"+_fieldId_shiyou);
	if(_shiyouObj.length){
		var _shiyouTipStr = "报销事由为必填项,请详细填写费用发生原因,否则,将被退回!";
		var _shiyouLabel = "<label id=\"fnaOverlabel_field"+_fieldId_shiyou+"\" for=\"field"+_fieldId_shiyou+"\" class=\"fnaOverlabel\">"+_shiyouTipStr+"</label>";
		_shiyouObj.before(_shiyouLabel);
		_fnaCheckShiyou();
		_shiyouObj.bind("focus",function(){
			jQuery("#fnaOverlabel_field"+_fieldId_shiyou).hide();
		});
		_shiyouObj.bind("blur",function(){
			_fnaCheckShiyou();
		});
	}

//处理:报销事由默认提示文字需要在流程打开界面就提示,鼠标点击自动消失,输入报销事由
function _fnaCheckShiyou(){
	var _shiyouObj = jQuery("#field"+_fieldId_shiyou);
	if(_shiyouObj.length){
		var _shiyou = _shiyouObj.val();
		if(_shiyou==""){
			jQuery("#fnaOverlabel_field"+_fieldId_shiyou).show();
		}else{
			jQuery("#fnaOverlabel_field"+_fieldId_shiyou).hide();
		}
	}
}

_fieldId_shiyou
_shiyouObj
_fnaCheckShiyou


</script>

<style>
.fnaOverlabel{
	position:absolute;
	z-index:1;
	font-size:12px;
	font-weight:normal;
	color:#A5A5A5!important;
	line-height: 22px!important;
	text-indent: 0px; 
	cursor: text;
}
</style>

如果需要显示的字体颜色,修改<style>标签内的color属性即可。

感谢打赏!
支付宝

回复

还没有任何回复,你来说两句吧

发表回复