设置html表单元素不可用的多种方法总结

IT工程师在工作中常会遇到提交表单的情况,那么当做编辑操作时,提交表单中往往会有一些内容是不允许再修改的,如编号等。怎么设置这些HTML表单内容不能修改?我总结了下面一些方法。

方法一:将不允许修改的内容直接显示,而不用输入框input。缺点:这种情况需要加入一个隐藏输入框保存不允许修改的元素,以保证提交后能获得不允许修改的元素值。

方法二:使用readonly。缺点:使用readonly可以使输入框只读,不过这种有个缺点就是不明显,看着和普通输入框一样,但无法修改,给用户感觉不太好。解决办法:可以通过添加CSS方式来达到变灰的效果。

方法三:使用disabled。缺点:使用disabled可以使输入框无法修改且显示为灰色,用户体验较好,但有个很严重的问题就是使用它后无法再提交被禁用的元素值。解决办法:这种情况可以通过再放一个隐藏框或使用js等其他手段来弥补。

方法四:使用SPAN与CSS。缺点:使用span与css可以做到灰色不可编辑的效果,用户体验还不错,但它也无法提交被禁用的元素值。解决办法:也需要通过再放一个隐藏框或使用js等其他手段来弥补。

方法五:使用onfocus=this.blur()。缺点:这种是通过简单的js使输入框无法点击或修改,表面跟readonly效果一样,但也有区别,就是readonly光标显示,本方法不显示光标。它的缺点也是不太明显。解决办法:可以通过添加CSS方式来达到变灰的效果。

本人推荐方法二和方法五。

下面附上所有测试代码截图和效果图:




转载请注明:http://www.aierlanlan.com/rzgz/4035.html