从一个需求入门【chatGPT正确的打开方式】

1,051 阅读7分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第4天,点击查看活动详情

前言

前些天,一个掘友私信问了我一个Vben中怎么修改input框 autocomplete 属性的问题,属性值帮助他改了,可是他的需求并没有实现,他希望每次点击输入框会出现上一次保存的记录。

为什么没有实现?通过各种百度查阅资料,我发现是否能实现显示之前的输入记录实现自动填充功能有很多的因素影响,除了代码层面更多的是浏览器相关的设置。

正好赶上chatGPT大火,为了更好的理解这一属性以及他能实现的功能,我便向他发起了询问

过程

第一步我们需要知道autocomplete属性的作用来看看我们的方向对不对

第一个问题:input框autocomplete属性的作用

第一次回答:

input 框 autocomplete 属性指定输入字段是否应该启用自动完成功能,或是否应该将输入域的值作为自动完成值提供给输入字段。该属性可以帮助用户输入数据,并且可以提高输入效率。例如,如果您在一个表单中有一个输入字段,用于输入用户的电子邮件地址,您可以使用 autocomplete 属性来让浏览器自动完成该字段,以便用户可以快速输入他们的电子邮件地址。

第二次回答:

autocomplete 是 HTML 中的一个属性,它可以让输入框自动完成内容。例如,如果您在搜索网站的搜索框中输入了一个单词的一部分,那么 autocomplete 属性可能会根据您之前输入过的内容自动补全剩余部分。

第三次回答:

输入框的 autocomplete 属性用于告诉浏览器是否应该启用自动完成功能。它的值可以是 on 或 off。如果设置为 on,浏览器会自动为该输入框填入已保存的值,例如用户的个人信息或历史输入。这可以提高用户体验并减少用户输入的错误。

chatGPT问题输入框上面有一个 Try again 按钮,当他的第一次回答不够详细或不能令我们满意我们可以多尝试几次,根据他给出的信息进行一个自我概括。

第一个问题我尝试了三次,第一次回答我知道了这个属性他可以启用自动完成功能,可以将输入的值作为自动完成值提供给输入字段,可是怎么启用呢?是谁启用?通过第二次,第三次回答,大概总结一下第一个问题在我心中已经有了基本的答案。

我们也可以针对疑问点多次询问来得到我们想要的答案

image.png

第二步根据第一个问题我们知道这个属性可以启用浏览器的自动填充功能,那浏览器的自动填充功能又是什么呢

第二个问题:浏览器的自动填充功能

浏览器的自动填充功能是指浏览器可以根据用户之前的输入记录,为用户自动填入常用的数据,以提高用户体验并减少用户输入的错误。例如,如果用户在购物网站上注册了账号,那么浏览器会自动填入该用户的个人信息,例如姓名、电话号码等,以便用户下次登录时不需要重新输入。自动填充功能可以通过在 HTML 表单元素中设置 autocomplete 属性来启用或禁用。

和我想的差不多说明方向没错,这个我们就不多问了,别把AI问坏了,继续进行

既然属性没错,为什么不生效呢,直奔主题

第三个问题: input框设置autocomplete为 ’on‘ 时提交表单后并没有出现上一次的记录是什么原因

第一次回答:

如果在 input 框中设置 autocomplete 属性为 on,但提交表单后没有出现上一次的记录,那可能是因为浏览器的隐私设置禁止了自动填充功能。某些浏览器可能会禁用自动填充功能,以避免收集用户的个人信息。如果想要启用自动填充功能,可以尝试在浏览器中更改隐私设置。此外,input 框中的 name 属性也可能会影响自动填充功能。如果 name 属性的值与浏览器中保存的记录不匹配,那么浏览器也可能不会自动填充该输入框。

自动填充功能开的... 嗯? 那可能是name属性影响的吗,继续深究

image.png

新的回答给了我思路,可能需要将autocomplete的值设置为要显示的预定义的值。

假设成功:chatGPT 🐂🍺

如果失败:这才有下文呀

第二次回答:

15298e88e2b6b130b62533f46ca92e8.png

这...感觉也问不出啥来了,换个问法吧

第四个问题:input的autocomplete 属性在什么情况下不生效

image.png

b63d36423d2eb694de27224e0bc3cf6.png

问了这么多,不生效的原因基本也都包含了,接下来做一个总结

第五个问题:关于autocomplete属性有哪些知识需要知道

第一次回答:

关于 autocomplete 属性,需要了解以下几点:

  1. autocomplete 属性是用于 input 框的 HTML 属性,用于启用或禁用浏览器的自动填充功能。
  2. autocomplete 属性的值可以是 on 或 off,分别表示启用或禁用自动填充功能。
  3. autocomplete 属性还可以使用预定义或自定义值来提供更多信息,以便浏览器选择合适的记录来自动填充该输入框。
  4. autocomplete 属性可能会受到浏览器的隐私设置的影响,如果禁用了自动填充功能,那么 autocomplete 属性也不会生效。
  5. input 框的 name 属性也会影响 autocomplete 属性的工作,如果 name 属性的值与浏览器中保存的记录不匹配,那么浏览器也可能不会自动填充该输入框。

第二次回答: image.png

第三次回答:

image.png

第四次回答:

d109e65bfb3eabe31bdd86e782ee80b.png

问了这么多autocomplete相关的问题,发现这个属性实现我们的需求是被动的,除了代码更多的需要看浏览器的脸色,那我们的需求有没有可能完全通过代码实现呢

第六个问题:用代码实现输入框点击显示历史记录的功能

image.png

image.png

image.png

感觉还是写代码他专业一点 😂😂😂

总结

通过一个简单的疑问和需求,算是对最近大火的chatGPT进行了一点简单的测试,AI功能属实强大。优缺点明显,至于将来是否能取代一些工种,真的大可不必担心,没几个人有耐心问他那么多问题的😀

目前阶段我觉得适当的使用他作为百度的补充,适用于

  • 对一些疑难杂点初步搜索做一个大概的了解
  • 对问题进行最后的总结
  • 询问具体的问题,不要太宽泛
  • 实现一段具体功能的代码
  • 摸鱼聊天(机器人)

正确的查询方式,这一点同百度

  • 同样的问题让他回答多次(当答案不变后刷新网页重问)
  • 不同的角度问同一个问题(横向纵向,格局打开)
  • 问题具体到细节最佳(关键词的多少影响很大)
  • 查询的非官方答案,多多总结

合理的使用chatGPT,有效的帮助我们更好的理解问题