使用 IE9、jquery 插件/html 验证的占位符问题

Posted 2023-03-05

【中文标题】使用 IE9、jquery 插件/html 验证的占位符问题

【英文标题】：Placeholder issue on validation with IE9, jquery plugin/html

【发布时间】：2016-02-29 08:05:17

【问题描述】：

我正在使用 jquery 插件在 IE9 上输入文本占位符，这给我带来了问题。

有一个页面，用户可以在其中选择一个用户名来选择它或在文本字段中编写自定义用户名。这个插件在 IE9 上为这个输入文本添加了一个 value 属性来模拟占位符。一切都很好，但是..

我收到一个验证错误，好像输入文本被错误地填充，错误地填充了假占位符，该占位符被发送到表单。如果在提交表单时使用 IE9，我会尝试从输入中删除该属性，但删除属性或使用 jquery 触发重置都有效。我尝试了一些东西，但没有运气..

如果 value 属性等于应该是占位符的内容（在本例中为“Type Username”），我想清除或删除发送到表单的值，是否可以重置或删除在发送之前来自提交事件的输入？

我尝试过这样的事情：

jQuery('button[type=submit]').on('click', function() 

    if (jQuery('#customUsername').val().indexOf('Type Username') >= 0 ) 
        jQuery('#customUsername').trigger('reset');
        jQuery('#customUsername').removeAttr('value');
        jQuery('#customUsername').removeAttr('placeholder');
    

);

但它正在发送并收到验证错误...

非常感谢！

【问题讨论】：

请创建jsfiddle

您应该阻止默认事件，并在 删除属性和重置内容之后提交表单。

仅供参考：在单击按钮提交时检查form 验证是错误的，请使用form 的submit 事件

验证是在服务器端完成的，而不是在客户端，但我只想删除该文本字段数据，而不是在具体的 IE9 案例中将其发送到服务器端。

@Raptor 你的解决方案有效，你能写出答案吗？

【参考方案1】：

由于<button type="submit"> 默认会提交表单，您应该先删除event.preventDefault() 的默认行为，然后执行您想要的操作。最后，您可以通过.submit() 函数提交表单。示例代码如下：

$('button[type=submit]').click(function( event ) 
  event.preventDefault();
  if ($('#customUsername').val().indexOf('Type Username') >= 0 ) 
        $('#customUsername').trigger('reset');
        $('#customUsername').removeAttr('value');
        $('#customUsername').removeAttr('placeholder');
        $('#frm').submit();
    
);