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/tzrz/7736.html
