javascript - HTML input onsearch event not firing on Safari - workarounds - Stack Overflow

For the last ten years I have successfully used an incremental HTML text search input box created with the following code and this still works as it should in Chrome. It is incremental because it reacts to each character entered by reacting to an onkeyup event and it also reacts to characters being removed also by reacting to an onkeyup event or the entire search string deleted with the 'x' by reacting to an onsearch event

However in IOS 17 Mobile Safari, the onsearch event stopped being triggered (even though the text was still cleared) and in IOS 18 Mobile Safari the 'x' was removed (you would have thought they could have synced these changes). IOS 18 was an improvement as at least the user was no longer confused even though it was an added inconvenience for them not being able to delete the whole text string with one keystroke.

However my problem is that MacOS Safari 18.3 still has the 'x' (which still clears the text) but now does not trigger the onsearch event. Setting the incremental attribute does not change this and I have not found any other way of detecting that the user has selected the x. I have tested onchange and that is not triggered either. Hopefully someone might suggest a workaround for me? or do I have to wait for a change to MacOS Safari to remove the 'x'.

function AddTextInputBox (Table,Category,BoxType,Visible,SideMenu) 
{
var row = AddRowToTable (Table);
var cell = AddCellToRow (row);

var inputObj = AddInputToCell (cell);
inputObj.type = "search" ;
inputObj.placeholder = "search text string" ;
inputObj.style.width = "90%" ;
inputObj.style.color = "red" ;
cell.colSpan = 3 ;
cell.style.textAlign = "center" ;
inputObj.value = UserSetting [BoxType][Category] ;
inputObj.onkeyup  = function (e) {SearchTextChange (this.Category,true,this.SideMenu); StopPropagation (e)};
inputObj.onsearch = function (e) {SearchTextChange (this.Category,true,this.SideMenu); StopPropagation (e)}; 
inputObj.ontouchstart  = function (e) {StopPropagation (e)};

if (!Visible) tr.style.display = "none" ; 

return inputObj ;  

};// end of AddTextInputBox function

For the last ten years I have successfully used an incremental HTML text search input box created with the following code and this still works as it should in Chrome. It is incremental because it reacts to each character entered by reacting to an onkeyup event and it also reacts to characters being removed also by reacting to an onkeyup event or the entire search string deleted with the 'x' by reacting to an onsearch event

However in IOS 17 Mobile Safari, the onsearch event stopped being triggered (even though the text was still cleared) and in IOS 18 Mobile Safari the 'x' was removed (you would have thought they could have synced these changes). IOS 18 was an improvement as at least the user was no longer confused even though it was an added inconvenience for them not being able to delete the whole text string with one keystroke.

However my problem is that MacOS Safari 18.3 still has the 'x' (which still clears the text) but now does not trigger the onsearch event. Setting the incremental attribute does not change this and I have not found any other way of detecting that the user has selected the x. I have tested onchange and that is not triggered either. Hopefully someone might suggest a workaround for me? or do I have to wait for a change to MacOS Safari to remove the 'x'.

function AddTextInputBox (Table,Category,BoxType,Visible,SideMenu) 
{
var row = AddRowToTable (Table);
var cell = AddCellToRow (row);

var inputObj = AddInputToCell (cell);
inputObj.type = "search" ;
inputObj.placeholder = "search text string" ;
inputObj.style.width = "90%" ;
inputObj.style.color = "red" ;
cell.colSpan = 3 ;
cell.style.textAlign = "center" ;
inputObj.value = UserSetting [BoxType][Category] ;
inputObj.onkeyup  = function (e) {SearchTextChange (this.Category,true,this.SideMenu); StopPropagation (e)};
inputObj.onsearch = function (e) {SearchTextChange (this.Category,true,this.SideMenu); StopPropagation (e)}; 
inputObj.ontouchstart  = function (e) {StopPropagation (e)};

if (!Visible) tr.style.display = "none" ; 

return inputObj ;  

};// end of AddTextInputBox function

• javascript
• html
• search
• input

Share Improve this question Follow asked Mar 3 at 16:07 Steve BrookerSteve Brooker 1,1911212 silver badges3030 bronze badges 4

• onsearch is a non-standard event instead of keyboard, search, etc events I would just use the "input" event. elSearch.addEventListener("input", yourFn);. The "input" event is the de-facto standard for all value-changes, copy/pasted, etc within and action-Element. Also, please create a minimal reproducible example so that one does not have to flip-flop code in order to reproduce the problem. – Roko C. Buljan Commented Mar 3 at 16:11
• Here is a fiddle (not by me) but demonstrates the same issue jsfiddle/fmp777/L43mcvg5/2 – Steve Brooker Commented Mar 3 at 16:31
• 1 I have changed my code to use oninput and everything works as it should. I wonder why I did not use this 10 years ago? – Steve Brooker Commented Mar 3 at 16:54
• Also, avoid the use of Event.stopPropagation (unless for debugging). An app and its 3rd party components should be able at any time (bubbling or not) to be notified, register, and respond to events happening in their lifecycle. – Roko C. Buljan Commented Mar 3 at 17:49

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

Search event is non-standard and there's no more compatibility for Safari .

You can use the input event to fix this.