如何在文本框中输入值后单击输入更改图像？
Posted
技术标签:
【中文标题】如何在文本框中输入值后单击输入更改图像？【英文标题】：How to change image on clicking enter after entering value in textbox? 【发布时间】：2022-01-21 14:57:22 【问题描述】：“asset/image”文件夹中有一堆图片。
我们必须在文本框中查看并输入图片中可见的 pin 码。
Pin Code 将存储在 TypeScript 中创建的数组中。
输入密码后点击进入
下一张图片应该会出现
图片不应该改变
ImageId 应该改变
应该在最后一张图片到来之前发生以下事情，在最后一张图片到来之后进入enter，应该提交表单。
html 代码
<html>
<body>
<nav>
<div class = "navbar-header">
<a href="#" class="navbar-brand">Image Change on clicking Enter in TextBox</a>
<input class = "col" type = "text" readonly value ="imgNumber/3 cityImageId">
</div>
</nav>
<div class = "textarea" contenteditable #scrollDiv [scrollTop]="scrollDiv.scrollHeight" wrap="hard">
<img contenteditable="false" [src]="imagePath" width = "1090px" height = "440"/>
</div>
<form>
<div>
<input type = "text" class="col2" [(ngModel)]="city.pinCode" (keyup.enter)="nextImage()" maxlength="6"/>
</div>
</form>
<div>
<input type = "label" class = "col3" value = "Pin Code" readonly />
</div>
</body>
</html>
TypeScript 代码
import CompileEntryComponentMetadata from '@angular/compiler';
import Component, OnInit from '@angular/core';
import CityClassification from 'src/app/domain/cityClassification.model';
import CityClassificationService from 'src/app/service/city-classification.service';
@Component(
selector: 'app-city-classification',
templateUrl: './city-classification.component.html',
styleUrls: ['./city-classification.component.css']
)
export class CityClassificationComponent implements OnInit
imgNumber : number =1;
cityImageId : number = 101;
imagePath : string ='assets/images/Ghazipur1.png';
cityDetailArray : CityClassification[] = [];
city: CityClassification =
pinCode : '1',
cityImageId : 101
nextImage()
constructor(private cityClassificationService: CityClassificationService)
ngOnInit(): void
型号代码
export class CityClassification
pinCode : string;
cityImageId : number;
constructor(pinCode : string, cityImageId : number)
this.pinCode = pinCode;
this.cityImageId = cityImageId;
CSS 代码
nav
background-color:black;
border : 0;
.navbar-header
text-align: center;
.navbar-header
color:white;
.col
margin-left: 950px;
text-align: right;
border : 0;
background-color:rgb(160,0,0);
.textarea
overflow: scroll;
height: 400px;
width:1090px;
background-color:white;
margin-left: 100px;
margin-top: 50px;
object-fit: none;
object-position: 1000px 200px;
.col2
width:230px;
height: 30px;
margin-top: 20px;
margin-left: 950px;
.col3
width:230px;
height: 30px;
margin-top: 20px;
margin-left: 950px;
我的文件结构
GitHub 代码链接 = https://github.com/Rajeev-singh-git/cityClassification
请帮我解决代码逻辑问题，我被卡住了 9 天。
【问题讨论】：
在什么情况下你想在按下回车键后改变图像？ 是的，在文本框中输入值并按回车后 @Rajeev 是否有任何序列可以显示下一个可用图像？或者你想随机加载一张图片？ 一个图像应该只加载一次，然后下一个图像应该来。有图像关联的图像编号 你需要这个angular-ivy-bt2lzc.stackblitz.io 【参考方案1】：我试过这个stackblitz。
这可能对你有帮助。
【讨论】：
以上是关于如何在文本框中输入值后单击输入更改图像？的主要内容，如果未能解决你的问题，请参考以下文章
键盘输入时，如何在Ajax调用URL更改后停止MVC页面刷新