diff --git a/README.md b/README.md index c3669c1..018d9d1 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,8 @@ getAddress.find( id:'getaddress_input', /* The id of the textbox' */ name:'getaddress_input', /* The name of the textbox' */ class:'', /* The class of the textbox' */ - label:'Enter your Postcode' /* The label of the textbox' */ + placeholder:'Enter your Postcode' /* The placeholder text of the textbox' */ + label:'Enter your Postcode' /* (DEPRECATED - used placeholder instead ) - The label of the textbox' */ }, button:{ id:'getaddress_button', /* The id of the botton' */ diff --git a/package-lock.json b/package-lock.json index 931693e..818dd02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "getaddress-find", - "version": "1.0.9", + "version": "2.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "getaddress-find", - "version": "1.0.9", + "version": "2.0.2", "license": "MIT", "dependencies": { "getaddress-api": "^1.1.13" diff --git a/package.json b/package.json index 071626b..97448f3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "getaddress-find", - "version": "2.0.2", + "version": "2.1.0", "description": "GetAddress.io - Find by postcode plug-in", "main": "dist/getaddress-find.mjs", "type": "module", diff --git a/src/Input.ts b/src/Input.ts index 02e5a4f..7df5116 100644 --- a/src/Input.ts +++ b/src/Input.ts @@ -16,6 +16,10 @@ export default class Input input.type = "text"; input.value = this.config.label; + if(this.config.placeholder?.length > 0) { + input.placeholder = this.config.placeholder; + } + if(this.config.class) { input.className = this.config.class; @@ -24,28 +28,33 @@ export default class Input input.name = this.config.name; input.autocomplete = "off"; - let styleAttr:Attr = this.getDefaultStyle(); - input.attributes.setNamedItem(styleAttr); - input.addEventListener("submit", ()=>{return false}); - input.addEventListener("focus", ()=> - { - input.removeAttribute('style'); - if(input.value === this.config.label){ - input.value = ''; - } - }); + /** + * @deprecated The following event listeners are for backwards compatibility. The use of the placeholder attribute proves this functionality. + */ + if(this.config.label?.length > 0) { + let styleAttr:Attr = this.getDefaultStyle(); + input.attributes.setNamedItem(styleAttr); + + input.addEventListener("focus", ()=> + { + input.removeAttribute('style'); + if(input.value === this.config.label){ + input.value = ''; + } + }); + + input.addEventListener("blur", ()=> + { + if(!input.value){ + input.value = this.config.label; + let styleAttr:Attr = this.getDefaultStyle(); + input.attributes.setNamedItem(styleAttr); + } + }); + } - input.addEventListener("blur", ()=> - { - if(!input.value){ - input.value = this.config.label; - let styleAttr:Attr = this.getDefaultStyle(); - input.attributes.setNamedItem(styleAttr); - } - }); - let container = document.getElementById(this.config.container_id); if(container){ diff --git a/src/Types.ts b/src/Types.ts index f2ab08a..2a3e2f4 100644 --- a/src/Types.ts +++ b/src/Types.ts @@ -18,7 +18,11 @@ export class Config{ export class InputConfig extends Config { - label:string = "Search.."; + /** + * @deprecated Label should not be used, use placeholder instead. If you would like a label, use a label element. + */ + label:string = ""; + placeholder:string = "Enter your Postcode"; muted_style:string = "color:#CBCBCB;"; class = ""; id = "getaddress_input" + this.getIdSuffix();