Javascript 良好的用户界面，允许用户将字段恢复为默认值

我的基于web的应用程序允许用户覆盖某些文本框中的值。如果它们不覆盖该值，系统将显示并使用默认值

我想支持这样一种场景：用户已经覆盖了该值，但现在想要恢复到系统默认值，但不知道输入什么值。我想提供一个直观的UI，使系统将字段的值恢复为默认值。有人有什么建议吗

字段既出现在空间充足的编辑表单上，也出现在空间不足的编辑网格上

要求用户清除字段不是一个选项，因为有时用户的覆盖是空值。宁愿不使用按键，如Ctrl-Z或ESC

---

我能想到的最好的事情是，用户将鼠标悬停在该字段上，并显示一个弹出窗口，允许用户选择使用系统默认值。我可以使用相同的弹出窗口捕获/显示与覆盖相关的注释

我在一个文本框后面使用了一个“倒带”类型的图标，比如一个圆圈中的箭头，它指向后面，有足够的空间让用户恢复到默认或原始版本

还使用灰色文本显示默认值-当用户覆盖时，该默认值将使用keyup事件消失

---

如果空间很短，您的弹出窗口听起来是个好主意。

我在文本框后面使用了一个“倒带”类型的图标，就像一个圆圈中的箭头，它向后指向有足够空间允许用户恢复到默认或原始版本

还使用灰色文本显示默认值-当用户覆盖时，该默认值将使用keyup事件消失

如果空间不够，弹出窗口听起来是个好主意。

怎么样

<input type="text" value="Enter text here, a space will clear it" 
onfocus="this.title='Clear field to revert to '+this.defaultValue" 
onblur="if (this.value=='') this.value=this.defaultValue; 
else this.defaultValue=this.value" />

怎么样

<input type="text" value="Enter text here, a space will clear it" 
onfocus="this.title='Clear field to revert to '+this.defaultValue" 
onblur="if (this.value=='') this.value=this.defaultValue; 
else this.defaultValue=this.value" />

---

我总是建议在决定答案之前先看看其他人是如何解决用户体验问题的。问问自己，哪些web或其他应用程序提供了默认值，并允许您恢复到默认值

我认为您可能要解决的问题不是恢复默认值的交互作用，而是通知用户默认值是什么。如果是这样的话，我会远离按钮，转向在线帮助

希望这有帮助

-

---

Nik.ca

我总是建议在决定答案之前，先看看其他人是如何解决用户体验问题的。问问自己，哪些web或其他应用程序提供了默认值，并允许您恢复到默认值

我认为您可能要解决的问题不是恢复默认值的交互作用，而是通知用户默认值是什么。如果是这样的话，我会远离按钮，转向在线帮助

希望这有帮助

- 尼卡