How can I execute a javascript function on text field input and update the field with new value

Question

I use a javascript function to find the src string in an iframe tag and return the found src string, and it works correctly alone, but I need to use it on a text input field to grab the iframe src on input paste, and update the same field with the new value returned by the function.

The search function works correctly

function findSrc(str, pointa, pointb) 
{
  var str = " "+str;
  var pa = str.indexOf(pointa);

  if( pa == 0 ) return "";
  pa += pointa.length;
  var pb = str.indexOf(pointb,pa) - pa;

  return str.substr(pa,pb);
}

Method used for text field but fails with no error message in the console

var fld = document.getElementById('textfield');
var src = fld.value;
fld.oninput = function() {
  if( src.indexOf('<iframe') != -1 ) {
    fld.value = findSrc(src, 'src="', '"');
  }
}

HTML

<input type="text" id="textfield" name="embedsrc" size="50" value="" />

What would be the correct method to achieve my goal?

Answer 1

I got it working with the following method, however if there is a better or efficient way, please inform.

The same string search function

function findSrc(str, pointa, pointb) 
{
  var str = " "+str;
  var pa = str.indexOf(pointa);

  if( pa == 0 ) return "";
  pa += pointa.length;
  var pb = str.indexOf(pointb,pa) - pa;

  return str.substr(pa,pb);
}

Created a new function

function getsrc() 
{
  var fld = document.getElementById('textfield');
  var src = fld.value;
  if( src.indexOf("<iframe") != -1 ) {
    fld.value = findSrc(src, 'src="', '"');
  }
}

HTML Appended addEventListener to the field with call back to the new function

<input id="textfield" name="frmsrc" type="text" size="50" value="" />
<script>
document.getElementById("textfield").addEventListener("input", getsrc);
</script>