左对齐文本输入 onblur (IE 8 & 9)

Posted 2023-04-18

【中文标题】左对齐文本输入 onblur (IE 8 & 9)

【英文标题】：Left align text input onblur (IE 8 & 9)

【发布时间】：2013-01-23 04:39:34

【问题描述】：

我正在寻找一种在用户触发 onblur 事件时左对齐文本输入框内容的方法。我看到有人提到使用 onblur="this.value = this.value" 解决问题，但这在 IE 中不起作用。

澄清：当用户键入超出文本框宽度然后离开焦点时，Internet Explorer 中会出现此问题。在 Chrome 和 Firefox 中，文本会自动左对齐，但在 IE 中不会发生这种情况。

应要求，我附上代码（在IE中查看）：

<input type="text" />

http://jsfiddle.net/t3hjonneh/FZJjW/

文本字段：

输入后：

模糊后：

它应该是什么样子：

【问题讨论】：

你的意思是你想让文本滚动回到它的初始位置？

@JuanMendes 是的。这就是我想要捕捉的功能。

【参考方案1】：

这与其说是一个适当的解决方案，不如说是一个 hack，但它确实有效：

function blurred(elem) 
    var range;
    // IE only, probably not the best check since it will run in other browsers
    // if they ever implement this feature
    if (elem.createTextRange) 
        range = elem.createTextRange();
        range.collapse(true);
        range.select();
    


<input type="text" onchange="blurred(this);" />

注意使用onchange 而不是onblur。这是因为select()在使用onblur时会造成一些麻烦。

【讨论】：

其实，为什么还要费心去改变这个特性呢？用IE浏览网页的人，反正已经习惯了。

但它确实有效 jsfiddle.net/FtzjL/3 你只需要修复它，这样它就不会在不支持 createTextRange 的浏览器中中断

@JuanMendes 已修复，但我不确定它是否适用于真正的 IE8 和 9，我只用 IE10 模拟过。

@JuanMendes 好的。您还尝试与我同时编辑我的帖子，我想我会覆盖您的编辑。如果还有什么，请随时再次编辑：)。

这行得通，但它会导致尝试将注意力集中在另一个输入上时出现问题：jsfiddle.net/t3hjonneh/esP8F/4 您将无法退出第一个输入。

【参考方案2】：

这是我模拟的适用于所有主流浏览器的 jQuery 版本：

$(document).ready(function()
        $('input[type=text]').change(function()
            try//select nothing but side-effect is that text left justifies
                if(/webkit/.test(navigator.userAgent.toLowerCase()))
                    return;//webkit browsers do it automatically
                 else if(this.createTextRange)  //ie
                    var r = this.createTextRange();
                    r.collapse(true);
                    r.select();
                 else if(typeof this.selectionStart !== "undefined")  //firefox
                    this.selectionStart = 0;
                    this.selectionEnd = 0;
                
             catch(err) 
            //?? nobody cares ??
            
        );
);

【参考方案3】：

我只是在该字段上设置一个类，然后在您的 html 中使用 onBlur 启动一个函数：例如onBlur="left()" 然后在您的 javascript 中，您可以简单地使用 .setAttribute 更改类作为额外的奖励，您还可以为该类设置其他属性。

虽然我确实支持发布相关代码的想法

【讨论】：

我不完全确定这会有什么帮助。你会在课堂上使用什么 css 来强制留下文本？文本对齐：左；只会导致非常奇怪的事情发生。并且更改类本身不会导致文本重新对齐。实际上不需要任何代码来复制这个问题，因为一个非常基本的 input type=text 元素和 Internet Explorer 将产生结果。

@Jonneh 是的，如果你想让更多人帮助你，你确实需要展示代码。更好的是，创建一个jsfiddle.net，这样人们就可以玩耍了。我什至不知道模糊后左对齐是什么意思。仅供参考，我拒绝在没有代码的问题上提供帮助，SO 的精神是我的代码，我希望它做 A，但它做 B，我该如何解决？

@JuanMendes 为没有任何实际发生的问题提供代码是相当困难的。但是，我附上了屏幕截图以帮助澄清。

@Jonneh Teemu 已经弄清楚了，我添加了一个工作版本的链接。你应该接受他们的回答。 jsfiddle.net/FtzjL/3 图片确实澄清了很多。

@JuanMendes 您在此处发布的链接缺少修复。感谢您的帮助。