[英]Need help making JS functions more dynamic
我想要做的是将JS函数用于表单中的其他输入字段。 例如,我想要一个LastName和LastNameLabel等。我希望可以通过某种方式调整函数以找到Aaa和AaaLabel对,以便每个字段都可以具有相同的效果。 我的代码如下。 谢谢!
更新:我现在正试图获取“原始值”以显示元素ID的名称,在小写字母后跟大写字母之间留一个空格。 例如,如果元素ID为LastName,则我希望innerHTML为“ Last Name”。 感谢你的帮助!!
<script type="text/javascript">
function LabelOnClick(el) { var associatedFieldId = el.getAttribute('for');
if (associatedFieldId)
document.getElementById(associatedFieldId).focus();
}
function FieldOnFocus(el) { document.getElementById(el.id + 'Label').className='FieldFocus';
}
function FieldOnKeyPress(el) { if (event.keyCode!=9 && event.keyCode!=8) { document.getElementById(el.id + 'Label').innerHTML='';
}
}
function FieldOnKeyDown(el) { el.style.width = Math.max(30,el.value.length*10)+'px';
}
function FieldOnKeyUp(el) { el.value=el.value.substring(0,1).toUpperCase()+el.value.substring(1,el.value.length);
if (el.value=='') document.getElementById(el.id + 'Label').innerHTML='Original Value';
}
function FieldOnBlur(el) { if (el.value=='') { document.getElementById(el.id + 'Label').className='FieldBlur';
document.getElementById(el.id + 'Label').innerHTML='Original Value';
}
}
</script>
<style>
.InputField { border: 1px dotted lightgray;
border-bottom:1px solid black;
min-width: 30px;
padding: 5px;
font-family:tahoma, arial, sans-serif;
font-size: 14px;
}
.FieldBlur { color: gray;
position: absolute;
padding: 6px;
padding-left: 8px;
padding-top: 8px;
font-family: tahoma, arial, sans-serif;
font-size: 14px;
}
.FieldFocus { color: lightgray;
position: absolute;
padding: 6px;
padding-left: 8px;
padding-top: 8px;
font-family: tahoma, arial, sans-serif;
font-size: 14px;
}
.FieldInput { color: black;
position: absolute;
padding: 6px;
padding-left: 8px;
padding-top: 8px;
font-family: tahoma, arial, sans-serif;
font-size: 14px;
}
</style>
<label id="FirstNameLabel" for="FirstName" class="FieldBlur"
onclick="LabelOnClick(this)">First Name
</label>
<input id="FirstName" class="InputField" type="text" name="FirstName" maxlength="25"
onfocus="FieldOnFocus(this)"
onkeypress="FieldOnKeyPress(this)"
onkeydown="FieldOnKeyDown(this)"
onkeyup="FieldOnKeyUp(this)"
onblur="FieldOnBlur(this)"/>
</body>
OK,忽略了一个事实,即内嵌事件处理程序一般是在这些天皱起了眉头,你可以试试以下,其中onclick
和onfocus
在你的HTML通过this
通过这种关联的功能,这些功能必须的元素的引用触发了事件,以便他们可以找出相关的字段或标签是什么:
<script>
function LabelOnClick(el) {
var associatedFieldId = el.getAttribute("for");
if (associatedFieldId)
document.getElementById(associatedFieldId).focus();
}
function FieldOnFocus(el) {
document.getElementById(el.id + "Label").className='FieldFocus';
}
</script>
<label id="FirstNameLabel" for="FirstName" class="FieldBlur"
onclick="LabelOnClick(this)">First Name </label>
<input id="FirstName" ... onfocus="FieldOnFocus(this)" ... />
我将在其他事件中做类似的事情作为读者的练习...
编辑以匹配您更新的问题:
如果这:
document.getElementById(el.id + 'Label').innerHTML='Original Value';
是您要讨论的部分,您要在其中用添加的空格替换元素ID的'Original Value'
,然后在这一点上el.id
保留“ LastName”,因此,如果您使用正则表达式(如下面的行),则应获得“姓”:
document.getElementById(el.id + 'Label').innerHTML
= el.id.replace(/([^A-Z])([A-Z])/g, "$1 $2");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.