微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在 div 中显示名字和姓氏的第一个字母,在 JavaScript 中只有一个输入

如何解决在 div 中显示名字和姓氏的第一个字母,在 JavaScript 中只有一个输入

我正在尝试创建一个文本输入,您可以在其中输入您的名字和姓氏。名字和姓氏的第一个字母应显示在 DIV 中。字母应直接显示,无需单击按钮。

例如:

您在文本字段中输入“John Doe”,并且 DIV 中应显示 JD。

最后应该是这样的

In the end it should look like this

解决方法

尝试这样的事情:

let text = ''
document.querySelector("input").addEventListener("input",() => {
  text = document.querySelector("input").value;

  let full_name = text.split(" ");
  let initials = full_name[0][0];
  if (text) {
    if (full_name.length >= 2 && full_name[1]) {
      initials += full_name[1][0];
    }
  } else {
    initials = '';
  }


  document.querySelector("div").innerHTML = initials;


});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
  </div>
  <input type="text">


</body>

</html>

,
import sys
import glob
from pathlib import Path
import pandas as pd


def convert_csv_to_xlsx(arg1):
    for ctr,file_name in enumerate(glob.glob(arg1),start=1):
        base_name = Path(file_name).stem
        pd.read_csv(file_name).to_excel(f"{base_name}.xlsx")
        print(f"Processed file {ctr}: '{file_name}'")


convert_csv_to_xlsx('*.csv')

sys.exit(0)

继续设置 const extractFirstLetters = function(name) { let firstName = name.split(' ')[0]; let lastName = name.split(' ')[1]; let firstLetters = firstName[0] + lastName[0]; return firstLetters; } let output = extractFirstLetters("John Doe") // Output => "JD"

更多关于JS DOM Methods

,

有两种方法可以实现:-

1 - 文本方式

const val = document.getElementById('name').value;
document.getElementById('initials').innerHTML = val.split[" "][0] + val.split[" "][1]
<div id="initials"><div>
<input type="text" id="name" value="John Doe">

2 - 图像方式

使用 API 生成姓名首字母的图像,

https://ui-avatars.com/

并将图片设置为 initials div 的背景。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?