过滤input输入框中的https://或者http://
时间: 2023-06-29 22:05:41 浏览: 94
你可以使用JavaScript中的正则表达式来过滤输入框中的`https://`或者`http://`,例如:
```javascript
var input = document.getElementById('inputBox'); // 获取输入框元素
input.addEventListener('input', function() { // 监听输入框内容变化事件
var value = this.value;
value = value.replace(/(https?:\/\/)/gi, ''); // 使用正则表达式替换掉输入框中的https://或http://
this.value = value; // 将过滤后的内容重新赋值给输入框
});
```
这样,用户在输入框中输入带有`https://`或`http://`的内容时,这些字符会被自动过滤掉。
相关问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过属性查询地图服务中的信息</title> <link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css"> <!-- <link rel="stylesheet" type="text/css" href="./css/esri.css" /> --> <link rel="stylesheet" href="https://js.arcgis.com/3.40/esri/themes/calcite/dijit/calcite.css"> <script src="https://js.arcgis.com/3.41/"></script> <script> require(["esri/map", //加载地图组件 "dojo/dom", "dojo/on", "esri/InfoTemplate", "esri/graphic", "esri/geometry/Point",//加载点对象组件 "esri/symbols/SimpleMarkerSymbol", "esri/geometry/Extent",//加载范围组件 "esri/layers/FeatureLayer", //加载FeatureLayer地图组件 // "esri/dijit/FeatureTable", "esri/layers/WebTiledLayer", //加载切片地图组件 "esri/layers/ArcGISDynamicMapServiceLayer",//加载动态地图组件 "esri/symbols/SimpleFillSymbol", "esri/renderers/UniqueValueRenderer", "esri/tasks/query", "esri/tasks/QueryTask", "esri/Color", "dojo/domReady!" ], function (Map, dom, on, InfoTemplate, Graphic, Point, SimpleMarkerSymbol,Extent, FeatureLayer, WebTiledLayer, ArcGISDynamicMapServiceLayer, SimpleFillSymbol, UniqueValueRenderer, Query, QueryTask, Color, GeoJsonLayer) { //初始化地图容器 // map = new Map("map", { logo: false, slider: false }, {zoom: 8}); map = new Map("map", { center: [109.33789 , 29.57985], basemap: "satellite", zoom: 10, sliderStyle: "small", logo: false }); // 创建底图 var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"); map.addLayer(basemap,0); // 创建动态图层 var dynamicLayer = new ArcGISDynamicMapServiceLayer("http://116.62.63.94:6080/arcgis/rest/services/sanhuxiangtest/MapServer"); map.addLayer(dynamicLayer,99); }) </script> </head> <body class="tundra"> <div id="map" style="width:900px; height:580px; border:1px solid #000;"></div> 类别名称:<input class="nm" type="text"> </body> </html>
这段代码是一个简单的HTML页面,用于通过属性查询地图服务中的信息。以下是代码的主要部分:
1. 引入必要的CSS和JavaScript库:代码中使用了ArcGIS API for JavaScript的版本3.41,并引入了其他必要的库文件。
2. 初始化地图:使用`new Map("map", options)`创建一个地图容器,其中`options`包含了地图的一些设置,例如中心点、底图、缩放级别等。
3. 创建底图和动态图层:使用`new ArcGISTiledMapServiceLayer(url)`创建一个底图,以及使用`new ArcGISDynamicMapServiceLayer(url)`创建一个动态图层。这些图层可以通过URL指定,以加载地图数据。
4. 将图层添加到地图上:使用`map.addLayer(layer, index)`方法将底图和动态图层添加到地图上。`index`参数可选,用于指定图层的显示顺序。
在页面中还有一个输入框,用于输入类别名称。您可以在页面加载完成后,通过属性查询来过滤地图服务中的信息。
请注意,该代码使用的是ArcGIS API for JavaScript版本3.x,而不是最新版本的4.x。如果您要使用最新版本的API,请相应地修改代码。另外,确保替换URL和其他参数以适应您自己的地图服务和需求。
element-ui input 输入框中 如何输入出现内容建议 简便写法
可以使用 `el-autocomplete` 组件来实现输入框内容建议的功能。它可以自动匹配用户输入的关键词,并在下拉框中显示匹配的结果。下面是一个示例:
```html
<template>
<div>
<el-autocomplete
v-model="inputValue"
:fetch-suggestions="querySearch"
placeholder="请输入关键词"
@select="handleSelect">
<template slot-scope="{ item }">
{{ item.value }}
</template>
</el-autocomplete>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
suggestions: ['HTML', 'CSS', 'JavaScript', 'Vue', 'React', 'Angular']
}
},
methods: {
querySearch(queryString, cb) {
let suggestions = this.suggestions.filter(item => {
return item.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
})
cb(suggestions)
},
handleSelect(item) {
console.log(item)
}
}
}
</script>
```
在这个示例中,我们使用了 `el-autocomplete` 组件,并将输入框的值绑定到了 `inputValue` 变量上。`fetch-suggestions` 属性指定了一个方法,用于根据用户输入的关键词查询匹配的结果。在 `querySearch` 方法中,我们使用了 `filter` 方法来过滤出匹配的结果,并将结果传递给回调函数 `cb`。最后,在 `handleSelect` 方法中可以获取用户选择的结果。
通过使用 `el-autocomplete` 组件,我们可以很方便地实现输入框内容建议的功能。